Cuatro métodos de posicionamiento del diseño CSS
1. Estático (posicionamiento estático):
Defaults. Sin posicionamiento, el elemento aparece en el flujo normal (ignorando las declaraciones de arriba, abajo, izquierda, derecha o índice z). Consulte el ensayo anterior.
2. Relativo (posicionamiento relativo):
El elemento posicionado como relativo está fuera del flujo de documentos normal, pero su posición en el flujo de documentos todavía existe, pero se mueve visualmente en relación con la posición original.
Posicionamiento relativo a su posición normal (original) a través de las configuraciones de arriba, abajo, izquierda y derecha. La calificación jerárquica se puede realizar a través del índice z.
.static1{
height:80px;
background-color: red;
}
.relative{
height:80px;
position:relative;
top:40px;
left:40px;
background-color: black;
}
.static2{
height:80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="relative"></div>
<div class="static2"></div>
</body>
Se refiere al punto original del padre como el punto original por defecto (el padre no tiene que establecer el atributo de posición), independientemente de si el padre existe o no, si hay FALLA o no, se coloca en la parte superior. esquina izquierda del padre, pero la propiedad Padding del padre lo afectará.
Si no hay padre, el punto original está en la parte inferior del elemento anterior en el orden del flujo de texto.
3. Absoluto (posicionamiento absoluto): Genere elementos absolutamente posicionados, que se posicionan con relación al primer elemento padre que no sea el posicionamiento estático. La posición del elemento se especifica mediante los atributos "izquierda", "superior", "derecha" e "inferior". La calificación jerárquica se puede realizar a través del índice z.
La capa posicionada como absoluta se separa del flujo normal de documentos, pero la diferencia con la relativa es que su posición en el flujo normal ya no existe.
Este atributo siempre es engañoso. En realidad, es incorrecto decir que cuando el atributo de posición se establece en absoluto, siempre se posiciona de acuerdo con la ventana del navegador. De hecho, esta es la característica del atributo fijo.
1. Si no hay PROBLEMA (arriba, derecha, abajo, izquierda), use la esquina superior izquierda del padre. Cuando no hay ningún padre, consulte la esquina superior izquierda del navegador.
2. Si TRBL está configurado, y el padre no establece el atributo de posición (posición: estática; no cuenta como configuración del atributo), entonces el absoluto actual se posicionará con la esquina superior izquierda del navegador como punto original, y la posición será determinada por TRBL.
3. Si se establece TRBL, y el padre establece el atributo de posición (no importa si es absoluto o relativo), entonces la esquina superior izquierda del padre se usa como origen para el posicionamiento y la posición está determinada por TRBL. Incluso si el padre tiene la propiedad Padding, no funcionará en ella.
<style type="text/css"> .static1{ height:80px; background-color: red;
} .father{ height:100px; background-color: pink; position:relative; left:20px;
} .relative{ height:80px; width:80px; position:absolute; top:10px; left:10px; background-color: black;
} .static2{ height:80px; background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="father">
<div class="relative"></div>
</div>
<div class="static2"></div>
4. Fijo (posicionamiento fijo): Genere elementos absolutamente posicionados y colóquelos en relación con la ventana del navegador. La posición del elemento se especifica mediante los atributos "izquierda", "superior", "derecha" e "inferior". La calificación jerárquica se puede realizar a través del índice z.
1. Si no hay FALLA (arriba, derecha, abajo, izquierda), el punto original del padre de referencia es el punto original por defecto (el padre no tiene que establecer el atributo de posición).
2. Si TRBL está configurado, colóquelo en relación con la ventana del navegador.
<style type="text/css"> .static1{ height:80px; background-color: red;
} .father{ height:100px; width:300px; background-color: pink; left:100px; top:100px;
} .relative{ height:80px; width:80px; position:fixed; left:20px; background-color: black;
} .static2{ height:80px; background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="father">
<div class="relative"></div>
</div>
<div class="static2"></div></pre>
atributo de índice z
El índice Z, también conocido como orden de apilamiento de objetos, utiliza un número entero para definir el nivel de apilamiento. Cuanto mayor sea el valor entero, mayor será la pila. Por supuesto, esto se refiere al apilamiento de elementos en el mismo nivel Si se apilan dos objetos Si este atributo tiene el mismo valor, se apilará según el orden en que fluyan en el documento HTML, y los escritos más tarde sobrescribirán a los anteriores. Cabe señalar que la relación padre-hijo no puede utilizar el índice z para establecer la relación superior-inferior, y el hijo debe estar por encima del padre.
Nota: El atributo de índice z de elementos con posicionamiento estático o sin posicionamiento de posición no es válido.