Cómo establecer la posición del elemento sin cambios en css

Método CSS para establecer la posición del elemento sin cambios: primero cree un archivo de muestra HTML; luego defina un estilo de identificación de "#ads", y establezca la altura y el ancho; finalmente, coloque el elemento en la posición especificada a través de "position: fixed y lata derecha e inferior.



El entorno operativo de este tutorial: sistema windows7, versión css3, este método es aplicable a todas las computadoras de la marca.

Recomendación:

el requisito que encontramos a menudo en el "Tutorial de video CSS" es querer que un elemento de la página se fije en una posición en el navegador, sin importar cuánto se desplace la barra de desplazamiento, la posición no cambia, como la ventana emergente. publicidad que vemos a menudo. El método es generalmente usar js control o usar css. Lo que escribí aquí es el método de control de css.

En IE7 y superior y en firefox, opera y safari, el atributo css "position: fixed" es compatible y su función es fijar la posición del elemento en relación con la ventana. El código es el siguiente

1

2

3

4

5

6

7

8

#ads {     position: fixed;     right: 0;     bottom: 0;     border: 1px solid red;     width: 300px;     height: 250px; } Definimos un estilo de id #ads , y Establezca la altura y el ancho para él, y coloque el elemento en la esquina inferior derecha de la ventana a través de la posición: fijo y derecho e inferior.

















Posición de uso: fijo para usar directamente la ventana del navegador como referencia para el posicionamiento. Está flotando en la página y la posición del elemento no cambiará con la barra de desplazamiento de la ventana del navegador; a menos que mueva la posición de la pantalla de la ventana del navegador en la pantalla, o Cambie el tamaño de visualización de la ventana del navegador, por lo que el elemento de posición fija siempre estará ubicado en una posición determinada de la vista en la ventana del navegador y no se verá afectado por el flujo del documento.

Pero bajo IE6, el atributo position: fixed no es compatible. En este momento, necesitamos hackear IE6. La solución es usar el atributo postion: absolute, su función es familiar para todos, posicionamiento absoluto relativo al elemento padre, y luego podemos cambiar el valor superior de #ads a través de expression.

La definición de expresión PS: IE5 y versiones posteriores admiten el uso de expresión en CSS para asociar propiedades CSS con expresiones JavaScript.Las propiedades CSS aquí pueden ser propiedades inherentes de elementos o propiedades personalizadas. En otras palabras, la propiedad CSS puede ir seguida de una expresión JavaScript y el valor de la propiedad CSS es igual al resultado calculado de la expresión JavaScript. Puede hacer referencia directamente a los atributos y métodos del propio elemento en la expresión, o puede utilizar otros objetos del navegador. Esta expresión es como una función miembro de este elemento.

Entonces podemos cambiar el valor superior calculando el valor de javascript en css, el código es el siguiente:

1

2

3

4

5

#ads {     _position: absolute;     _top: expression (documentElement.scrollTop +





            documentElement.clientHeight-this.offsetHeight);

}

Todo parece estar perfecto, pero cuando lo ejecutamos bajo IE6, encontraremos que a medida que se mueve la barra de desplazamiento, nuestro #adsfriend temblará. La solución también es muy simple, solo agregue un poco de CSS al cuerpo, de la siguiente manera:

1

2

3

4

body {     background-image: url (about: blank); / * para IE6 * /     background-attach: fixed; / * Obligatorio * / } ¡ Muy bien, hecho! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! PD: Originalmente, se usó "url (text.txt)", pero txt no existe. La solicitud http informa un error 404, que afecta la velocidad de carga. Consulte algunos escritos en línea, usando about: blank puede lograr el mismo propósito . Se dice que el principio es que ie6 no admite fijo, pero su estilo de fondo sí admite fijo. El fondo se utiliza para eliminar el jitter. Espero que pueda aconsejarme. El código completo: 1 2 3 4 5 6 7 8 9 10 11 12 13 14











































15

cuerpo {     background-image: url (sobre: ​​blanco); / * para IE6 * /     archivo adjunto de fondo: fijo; / * 必须 * / } #ads {     ancho: 300px;     altura: 250px;     posición: fija;     derecha: 0;     abajo: 0;     _posición: absoluta;     _top: expresión (documentElement.scrollTop +         documentElement.clientHeight-this.offsetHeight);     borde: 1px rojo sólido; }