El posicionamiento se utiliza cuando se produce una superposición en la página.
1. Posicionamiento fijo: posición: fiexd
No ocupa la posición original relativa al navegador (fuera del flujo de documentos)
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
top: 300px;
left: 300px;
}
</style>
<body>
<div id="d1">我是第一个div</div>
</body>
Representaciones:
2. Posicionamiento relativo: posición: relativa;
El posicionamiento relativo no se saldrá del flujo de documentos, en relación con su propia posición.
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
position:relative;
top: 300px;
left: 300px;
}
</style>
<body>
<div id="d1">我是第一个div</div>
</body>
3. Posicionamiento absoluto: posición: absoluta;
No ocupa la posición original (fuera del flujo del documento), respecto a quién cambiará, si el elemento ancestro más cercano tiene un atributo de posicionamiento, será relativo al elemento, si no, será relativo al cuerpo.
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 300px;
left: 300px;
}
</style>
<body>
<div id="d1">我是第一个div</div>
</body>
Generalmente utilizamos el método de padre e hijo para localizar, por ejemplo:
<style>
#mydiv{
width: 500px;
height: 500px;
background-color: orange;
position: relative;
}
#d1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 300px;
left: 300px;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="d1">我是第一个div</div>
</div>
</body>
Imagen del efecto:
se puede ver que "Soy el primer div" está posicionado en relación con el elemento principal mydiv.
4. Posicionamiento estático: posición: estática;
El valor predeterminado de la propiedad de posición de posicionamiento es estático. Bajo esta posición, las configuraciones superior, izquierda, inferior y derecha no son válidas.
5. Índice z jerárquico
El índice z establece el nivel y el valor más bajo se sobrescribirá con el valor más alto.
(1). Si se establece absoluto para todos los elementos secundarios, entonces todos los elementos secundarios se apilarán y se cubrirán entre sí.
(2). El requisito previo para usar el índice z: debe establecer el atributo de posicionamiento
(3). Sólo se pueden ajustar hermanos, pero no Ajustar padre e hijo. El hijo siempre cubre al padre
(4). Rango de valores: -1~999. -1 es la capa inferior. Se sugiere que el marco emergente sea hijo del cuerpo.
Antes de configurar el nivel:
<style>
#mydiv{
width: 500px;
height: 500px;
background-color: blue;
position: relative;
}
#d1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
#d2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 100px;
left: 100px;
}
#d3{
width: 300px;
height: 300px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="d1">我是第一个div</div>
<div id="d2">我是第二个div</div>
<div id="d3">我是第三个div</div>
</div>
</body>
Después de configurar la jerarquía:
<style>
#mydiv{
width: 500px;
height: 500px;
background-color: blue;
position: relative;
}
#d1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
z-index: 3;
}
#d2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 100px;
left: 100px;
z-index: 2;
}
#d3{
width: 300px;
height: 300px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="d1">我是第一个div</div>
<div id="d2">我是第二个div</div>
<div id="d3">我是第三个div</div>
</div>
</body>
