Comunidad de diseño web y desarrollo en internet online

CSS problema con DIV en posición FIXED.

Citar            
MensajeEscrito el 09 Abr 2012 03:01 pm
Hola, a ver si me logro explicar, estoy tratando de hacer una división estática del lado izquierdo de mi pagina, utilizando la posición fixed, me funciona bien cuando hago scroll hacia arriba o abajo, pero cuando cambia el tamaño de la pantalla la división se monta sobre el contenido, esto creo porque "fixed" toma los margenes del borde del navegador. Mi pregunta es, es posible tener una división que cuando se haga scroll hacia arriba o abajo la posicion sea fixed y cuando se haga scroll hacia la derecha o izquierda sea absolute??. Gracias.

Por daltuvem

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 09 Abr 2012 04:05 pm
Nop, no creo que sea posible, tendrás que recurrir a JS. Tendrías que ponerlo en el css como absolute, y en el JS accesas al atributo "top" de ese div y la refrescas conforme se hace scroll.

O bien puedes ponerlo como fixed y accesar a la propiedad "left".

Por Lexas

1207 de clabLevel

7 tutoriales

Genero:Femenino   Desarrollador de GAIA Premio_Secretos

Ilustración y desarrollo de software

firefox
Citar            
MensajeEscrito el 09 Abr 2012 04:24 pm
Encierra todo con un <div> al cual le pones position: relative; y al elemento que tienes fixed, cámbialo por position:absolute; La idea es que sea el <div> esterno el que se desplace a derecha e izquierda, llevándose consigo los elementos dentro de él.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 09 Abr 2012 07:22 pm
Prueba ese codigo haber si te funciona

Código HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>Position Fixed</title>
</head>

<body>


<div style="position: fixed; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 1;">
Esta capa tiene posicionamiento fixed.
<br>
<br>
Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda.
</div>

<div style="position: fixed; width: 700px; height: 30px; padding: 10px; background-color: #d0f; top: 150px; left: 10px; z-index: 2;">Posicionamiento fixed</div>
<h1>Hola</h1>
<div style="position: fixed; width: 100px; height: 30px; padding: 10px; background-color: #0df; bottom: 10px; right: 10px; z-index: 4;">Posicionamiento fixed</div>
<br>
<br>
<br>
<br>
Pongo texto para que se vea!!
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Esto hace desplazamiento, con tanto br
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>más abajo....
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Las capas Fixed siempre están en el mismo sitio!!
</body>
</html>

Por Eclypse

Claber

118 de clabLevel



 

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.