Puntos principales de este artículo:
- Los tres métodos de posicionamiento más comunes de CSS se explican en detalle: fijo, absoluto, relativo.
- Explica casos típicos de posicionamiento y escenarios de uso, y combina efectos especiales y animaciones de transición.
- Añadido posicionamiento gráfico CSS.
El posicionamiento CSS (posición) se utiliza para establecer la posición de los elementos de la etiqueta y es el tema más importante del diseño CSS. A veces, algunos elementos deben fijarse en una determinada posición de la ventana, como la barra lateral, la barra de navegación del encabezado, el anuncio, etc., o deben distribuirse en relación con un determinado elemento contenedor, como un menú desplegable. La posición predeterminada de los elementos en una página web se determina de arriba a abajo y de izquierda a derecha. Esta disposición predeterminada también se denomina flujo de documentos normal (posición: estática;). El posicionamiento fijo, o el diseño de elementos absolutamente fijos, se separará del flujo normal del documento y el navegador los representará por separado.
posicionamiento fijo
Algunos elementos de la página web deben fijarse en una determinada posición en la ventana del navegador, como las barras laterales, las barras de navegación del encabezado, los anuncios, etc. El posicionamiento fijo está diseñado para este escenario. Vea un ejemplo:
<style>
.fixed {
position: fixed;
top: 50px;
left: 80px;
/*辅助样式*/
width: 100px;
height: 100px;
background-color: gold;
}
.long {
width: 30px;
}
</style>
<h1>我是标题</h1>
<div class="fixed">固定盒子</div>
<h1 class="long">我是长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的内容</h1>
【Puntos clave】
1) position: fixed;Declaración ;
2) Use top, left, right, bottomestas cuatro propiedades para establecer la distancia entre el cuadro y la ventana del navegador, como se muestra en la figura a continuación:
[Pensando] Debido a que la pantalla es un gráfico plano, solo necesita configurar la parte superior o inferior en la dirección del eje Y, y solo necesita configurar la izquierda o la derecha en la dirección del eje X para colocar el cuadro con precisión. si configura izquierda y derecha al mismo tiempo?
[Sugerencias] Los elementos que utilizan una posición fija se separarán del flujo del documento, como si flotaran, y se cubrirán sobre otros elementos sin ocupar el espacio del elemento. Si no se establecen la altura y el ancho, estará en la posición del flujo de documentos estáticos.
[Consejos] Los elementos que están fuera del flujo del documento tienen algunas propiedades excelentes: incluso los elementos en línea pueden establecer márgenes de ancho, alto, superior e inferior sin causar reflujo.
posición fija centrada
Hay tres formas comunes de lograr el centrado con posicionamiento fijo.
el primer método:
<style>
.fixed {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/*辅助样式*/
width: 100px;
height: 100px;
background-color: gold;
}
</style>
<div class="fixed"></div>
[Puntos] Establezca izquierda=derecha, arriba=abajo y margin: auto; establezca .
[Pensando] ¿Cómo configurar arriba y abajo solo necesita estar centrado?
El segundo método:
<style>
.fixed {
width: 300px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
/*辅助样式*/
background-color: gold;
}
</style>
<div class="fixed"></div>
[Puntos] Primero coloque la esquina superior izquierda del elemento fijo en el centro de la pantalla y luego use el margen para ajustar el centro del cuadro fijo al centro de la pantalla.
[Discusión] Este método tiene una desventaja: necesita ajustar manualmente la posición de acuerdo con el ancho y la altura de la caja.
El tercer método:
<style>
.fixed {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*辅助样式*/
width: 300px;
height: 100px;
background-color: gold;
}
</style>
<div class="fixed"></div>
[Puntos] Este método utiliza transform: translate(-50%, -50%);en lugar margindel método para lograr el ajuste automático. transformRepresenta transformaciones como traslación, rotación, escalado. translate(x, y)Indica una traslación a lo largo Xdel eje y Yel eje.
Pantalla en mosaico de posicionamiento fijo
¿Cómo hacer que una caja cubra toda la pantalla? Ver ejemplo:
<style>
.fixed {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*辅助样式*/
background-color: gold;
}
</style>
<div class="fixed"></div>
[Puntos] Establezca la parte superior, inferior, izquierda y derecha en 0, y puede lograr el efecto de mosaico sin configurar el ancho y la altura.
Posicionamiento absoluto y relativo
A veces, una página web necesita implementar algunos efectos especiales: como un menú desplegable, la posición del contenido detallado del menú desplegable es fija en relación con todo el menú y el contenido detallado del menú desplegable es oculto, y el menú desplegable solo se mostrará cuando el mouse se deslice sobre el menú Detalles.
Posicionamiento absoluto y experiencia de posicionamiento relativo
<style>
.box1 {
width: 300px;
height: 300px;
margin: auto;
background-color: lightblue;
}
.box2 {
width: 200px;
height: 200px;
margin: auto;
background-color: violet;
/*参考元素*/
position: relative;
}
.box3 {
width: 100px;
height: 100px;
margin: auto;
background-color: lightpink;
/*需要定位的元素*/
position: absolute;
top: 20px;
left: 30px;
}
</style>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
[Puntos] El posicionamiento relativo debe prestar atención a los siguientes aspectos:
-
El cuadro que necesita ser posicionado se declara como:
display: absolute; -
A continuación, establezca el elemento de referencia en:
display: relative; -
Finalmente establezca la posición relativa:
top: xxx; left:xxx;.
display: absolute;Se llama posicionamiento absoluto, porque absolutetiene un significado absoluto, pero se siente un poco como un elemento relativo cuando se usa, porque un elemento posicionado absolutamente necesita establecer un elemento de referencia y luego establecer las compensaciones hacia arriba, abajo, izquierda y derecha. en relación con este elemento de referencia, por lo que depende de cómo lo entiendas .
[Habilidades] Una pequeña fórmula para comprender el posicionamiento absoluto: diseño relativo = posicionamiento absoluto + posicionamiento relativo para establecer el sistema de referencia
[Puntos de conocimiento] Los elementos posicionados de forma absoluta también se separarán por completo del flujo del documento y no afectarán a otros elementos.
[Puntos de conocimiento] El elemento relativo puede ser un elemento padre o un elemento ancestro, buscará capa por capa hasta encontrar el elemento o cuerpo de referencia, si hay más de uno, se adopta el principio más cercano.
[Punto propenso a errores] Los elementos hermanos y los elementos secundarios no se pueden usar como elementos de referencia.
[Puntos de conocimiento] Los elementos con valores de posición relativos, fijos y absolutos se considerarán como elementos de referencia, y generalmente se usa relativo.
Posicionamiento absoluto para implementar menú desplegable
<style>
.dropdown {
padding: 5px;
/*参考元素*/
position: relative;
}
.dropdown .header {
cursor: pointer;
}
.dropdown .content {
width: 150px;
background-color: grey;
/*相对参考元素定位*/
position: absolute;
top: 100%;
/*设置高度为 0 来隐藏元素*/
height: 0;
overflow: hidden;
/*过渡动画*/
transition: 0.3s;
}
.dropdown:hover .content {
/*鼠标放上去展开菜单*/
height: 100px;
}
</style>
<div class="dropdown">
<button class="header">查看更多</button>
<div class="content">
二级菜单
</div>
</div>
posicionamiento relativo
El posicionamiento relativo se refiere a elementos con position: relative;atributos . Los elementos posicionados relativamente no se separan del flujo del documento y ocuparán una posición en el flujo del documento normal. Si utiliza left,right,top, bottompara establecer el valor de desplazamiento, el valor de desplazamiento es relativo a su flujo de documentos normal posición. Esto se parece un poco a una experiencia fuera del cuerpo: el cuerpo no se mueve y el contenido puede cambiar.
<style>
.box1 {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: lightblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: violet;
position: relative;
top: -10px;
}
.box3 {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
En el escenario de uso del posicionamiento relativo, el cuadro de posicionamiento relativo se usa generalmente como el elemento de referencia del posicionamiento absoluto, es decir: padre relativo al hijo. Algunos estudiantes pueden usar elementos relativos para afinar la posición de los elementos, pero personalmente no recomiendo usarlos. Puede usar margen (puede establecer números negativos) o transformar como alternativa.
[Sugerencia] Para obtener más detalles de posicionamiento, lea MDN 1
aplicación de ubicación
menú desplegable derecho
El ejemplo anterior utiliza el posicionamiento absoluto para implementar un menú desplegable. Además, también podemos implementar un menú de clic derecho. El menú de clic derecho se usa generalmente en la categoría de navegación de sitios web de comercio electrónico y sitios web de cursos en línea. Ejemplo de un menú desplegable:
<style>
.container {
width: 1000px;
height: 300px;
margin: 0 auto;
background-color: royalblue;
position: relative;
}
.side {
width: 200px;
height: 300px;
/*相对容器定位，列表盖在容器内*/
position: absolute;
background-color: rgba(160, 160, 160, 0.4);
}
ul {
padding: 0;
}
ul li {
list-style-type: none;
line-height: 2;
padding: 0 1rem;
border-bottom: 1px solid #aaa;
}
ul li:hover {
background-color: darkblue;
color: white;
cursor: pointer;
}
ul li .menu {
height: 300px;
background-color: steelblue;
/*相对 .side 定位*/
position: absolute;
left: 100%;
top: 0;
/*宽度为 0 隐藏元素*/
width: 0;
overflow: hidden;
/*过度动画*/
/*transition: 0.3s;*/
}
ul li:hover .menu {
/*摸到分类条目恢复宽度，展开子菜单*/
width: 500px;
}
ul li span {
float: right;
font-weight: bold;
}
</style>
<div class="container">
<div class="side">
<ul>
<li>手机 <span>></span>
<div class="menu">1</div>
</li>
<li>电视<span>></span>
<div class="menu">2</div>
</li>
<li>笔记本<span>></span>
<div class="menu">3</div>
</li>
<li>平板<span>></span>
<div class="menu">4</div>
</li>
</ul>
</div>
</div>
Este caso es muy clásico e involucra dos capas de posicionamiento, la primera capa es el posicionamiento del menú principal a la izquierda con respecto al contenedor, y la segunda capa es el posicionamiento del menú secundario con respecto al menú principal a la izquierda.
[Pensando] ¿Cómo lograr el efecto de seguir el menú secundario ( obtener la navegación del curso en el sitio web oficial )?
efecto máscara
<style>
.box {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: wheat;
/*参考元素*/
position: relative;
}
.content {
width: 200px;
height: 200px;
background-color: orange;
}
.up-door {
width: 100%;
background-color: rgba(66, 66, 66, 0.4);
position: absolute;
top: 0;
/*高度为零隐藏元素*/
height: 0;
overflow: hidden;
/*过度效果*/
transition: .3s;
}
.down-door {
width: 100%;
background-color: rgba(66, 66, 66, 0.4);
position: absolute;
bottom: 0;
/*高度为零隐藏元素*/
height: 0;
overflow: hidden;
/*过渡效果*/
transition: .3s;
}
.box:hover .up-door {
height: 50%;
}
.box:hover .down-door {
height: 50%;
}
</style>
<div class="box">
<div class="content"></div>
<div class="up-door">上</div>
<div class="down-door">下</div>
</div>
[Agujero cerebral] Si el fondo del contenido se reemplaza con una imagen de una lengua, y las cortinas superior e inferior se reemplazan con dientes superiores e inferiores, será un balbuceo.
Los efectos de animación se mostrarán primero. Si tiene alguna buena idea, deje un mensaje y compártala.
artículo de referencia
♥ Soy ingeniero de front-end: tu amada Sen. Muchas gracias por sus gustos y atención, y bienvenidos a todos a participar en discusiones o colaboraciones.
★ Este artículo es de código abierto , indique la fuente para la reimpresión: Autocultivo de ingenieros front-end . GitHub.com@xiayulu.
★ Para obtener información sobre cooperación creativa o contratación, envíe un mensaje privado o envíe un correo electrónico a: [email protected], especificando el asunto: cooperación creativa o contratación de ingenieros de front-end .