Disposición de CSS - atributo position
- Página anterior max-width CSS
- Página siguiente z-index CSS
position La propiedad especifica el tipo de método de ubicación del elemento (estático, relativo, fijo, absoluto o sticky).
position 属性
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值：
- static
- relative
- fixed
- absolute
- sticky
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。
position: static;
HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
这是所用的 CSS：
Ejemplo
div.static {
position: static;
height: 100px;
}
position: relative;
position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
这是所用的 CSS：
Ejemplo
div.relative {
position: relative;
left: 30px;
height: 100px;
}
position: fixed;
position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。
请注意页面右下角的这个固定元素。这是所用的 CSS：
Ejemplo
div.fixed {
position: fixed;
bottom: 0;
top: 80px;
width: 300px;
height: 100px;
}
position: absolute;
position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
Nota:“被定位的”元素是其位置除 static 以外的任何元素。
这是一个简单的例子：
这是所用的 CSS：
Ejemplo
div.relative {
position: relative;
width: 400px;
height: 200px;
height: 100px;
}
height: 200px;
position: absolute;
div.absolute {
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
position: sticky;
position: sticky; border: 3px solid #73AD21;
Los elementos sticky se ubican en relación con la posición del desplazamiento del usuario.relative) y fijo (fixed) entre cambio. Al principio se colocará en posición relativa, hasta que se encuentre con la posición de desplazamiento dada en la vista - luego se 'pegará' en la posición adecuada (por ejemplo, position:fixed).
Nota:Internet Explorer, Edge 15 y versiones anteriores no admiten la ubicación sticky. Safari requiere el prefijo -webkit- (ver el ejemplo a continuación). Además, debes especificar al menos top、right、bottom o left uno de los, para que la ubicación sticky funcione.
En este ejemplo, el elemento sticky se quedará en la parte superior de la página cuando alcance su posición de desplazamiento (top: 0)。
Ejemplo
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Elementos superpuestos
Al ubicar elementos, pueden superponerse a otros elementos.
z-index El atributo especifica el orden de apilamiento del elemento (qué elemento debe colocarse delante o detrás de otros elementos).
Los elementos pueden establecer un orden de apilamiento positivo o negativo:
Este es un título
Debido a que el z-index de la imagen es -1, se encuentra detrás del texto.
Ejemplo
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Los elementos con un orden de apilamiento más alto siempre se colocan antes de los elementos con un orden de apilamiento más bajo.
Nota:Si dos elementos ubicados se superponen y no se especifica z-indexSi no se especifica, el elemento ubicado en el código HTML al final se mostrará en la parte superior.
Posicionar texto en la imagen
Cómo colocar texto en una imagen:
Ejemplo
Prueba por ti mismo:
Más ejemplos
- Establecer la forma del elemento
- Este ejemplo muestra cómo establecer la forma de un elemento. El elemento se corta en esta forma y se muestra.
Todos los atributos de posición CSS
| Atributo | Descripción |
|---|---|
| bottom | Establecer el margen exterior inferior de la caja de posición. |
| clip | Cortar elementos de posicionamiento absoluto. |
| left | Establecer el margen izquierdo externo del cuadro de posicionamiento. |
| position | Especificar el tipo de posicionamiento del elemento. |
| right | Establecer el margen derecho externo del cuadro de posicionamiento. |
| top | Establecer el margen superior externo del cuadro de posicionamiento. |
| z-index | Establecer el orden de apilamiento de los elementos. |
Lectura adicional
Libros complementarios:Resumen de posicionamiento CSS
Libros complementarios:Posicionamiento relativo CSS
Libros complementarios:Posicionamiento absoluto CSS
- Página anterior max-width CSS
- Página siguiente z-index CSS
