CSS problema con DIV en posición FIXED.

Citar

Escrito 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

Envíale un mensaje privado

Citar

Escrito 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

1204 de clabLevel

7 tutoriales

Genero:Femenino Desarrollador de GAIA Premio_Secretos

Envíale un mensaje privado Web

Ilustración y desarrollo de software

@dislexas

Citar

Escrito 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

1950 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito 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

Envíale un mensaje privado Web

CSS problema con DIV en posición FIXED.

Escribe una respuesta rapida