La superposición de un elemento sobre otro con CSS

En este artículo, vamos a aprender cómo superponerse uno sobre otro elemento con CSS ? Vamos a ver la propiedad y explicar cómo funciona?

CSS también se conoce como capa de presentación. Muy bien va con su nombre, ya que añade un estilo más de la página web. Con CSS3, tenemos la personalización aún más potente en nuestro haber y el diseño de casi todo es posible con esta tecnología mejora continua.

La superposición de patrón de diseño es bastante común en la web. Verá bloques se superponen, ya sea parcial o totalmente sobre otro bloque o sección de contenido. Esto se logra con el posicionamiento CSS y el uso de un know propiedad especial como índice z . Vamos a utilizar la combinación de ellos para producir una muy buena página web buscando. La propiedad z-index en CSS se utiliza para establecer la eje z del elemento en el orden de los números enteros. Mayor es el número entero, por encima del elemento en una capa eje z.

Código – CSS

.element1 {
z-index: 2;
}
.element2 {
z-index: 10;
}

En este código, podemos ver que elemento2 tiene mayor índice z, por lo que se coloca por encima de la element1. Por class el índice z de cada elemento es 0 y si dos de ellos tienen el mismo índice, entonces el elemento que se define esta última en el archivo HTML se superpondrá a la anterior.

El papel de z-index es evidente en los menús de navegación superior. Se superponen el contenido mientras se desplaza. En este ejemplo, vamos a construir un menú de navegación simple que mantiene su posición y el contenido se desplazará bajo ella. Se utilizará tanto la posición y z-index al trabajo.

En primer lugar definimos formato HTML. Tenemos dos tramos, uno navegación class que contiene el logotipo y otras cosas y otra sección es la sección de contenido donde reside el contenido class. Hemos añadido el .navigation sección class a la navegación y .Este contenido class a default sección de contenido.

class la parte CSS, nos dirigimos a .navigation class y aplicar propiedad de posición fija para asegurarse de que permanece en su posición original cuando el usuario se desplaza. El propiedad top se asegura de que se inicia en la parte superior de la página. También definimos el 100% de ancho y 80px de altura como dimensiones de este menú de navegación. El, índice z propiedad importante será asegurarse de que permanece en la parte superior de todo el contenido. Hemos siempre que el valor de 100, aunque z-index: 1 también trabaja muy bien, pero como una medida que si cualquier otro elemento de la página también tiene índice z , para que no se muestre correctamente.

A continuación seleccionar el .Sección for elemento y aplicar la propiedad de posición en él, la posición relativa ayuda a mover el elemento por 80px utilizando la propiedad top . Hemos cambiado el elemento por 80px que es la altura del menú de navegación, por lo que el contenido es visible después del menú. He aquí una demostración ,

DEMO

HTML con CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body {
margin: 0;
padding: 0;
}
.navigation {
position: fixed;
top: 0;
width: 100%;
height: 80px;
background: #f56;
z-index: 100;
padding: 0 20px;
}
.content {
position: relative;
top: 80px;
}
</style>
</head>
<body>
<div class="navigation">
<h1>Nav Menu</h1>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit excepturi ipsa inventore placeat error vitae voluptatum tenetur praesentium reiciendis cupiditate porro natus, suscipit fuga at pariatur omnis necessitatibus, recusandae ut voluptas saepe. Adipisci quo aut inventore at, iure aliquam repudiandae, atque nam ratione odit magni facilis odio labore, assumenda doloremque?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea veritatis illo temporibus officiis voluptatibus, cupiditate voluptatem beatae blanditiis odio quae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ipsa numquam officiis, sed odit amet molestias veniam obcaecati impedit optio iusto ipsam tempore mollitia voluptatibus, sint at magni consectetur velit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea veritatis illo temporibus officiis voluptatibus, cupiditate voluptatem beatae blanditiis odio quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In perferendis animi eum tempore ipsum dolorum debitis placeat iste impedit recusandae laudantium voluptates accusantium aut, laborum nesciunt quibusdam dolores maxime odio quo. Molestias quae ducimus adipisci eaque, ratione odit. Ad, perspiciatis. Qui nulla expedita consequatur minus voluptas. Iure praesentium nobis voluptatem suscipit atque dolore dolorem tempora quis inventore, eius laborum sed enim! Nihil veritatis laborum voluptate, rerum cupiditate, beatae nisi obcaecati eius. Omnis veritatis temporibus a aliquid, expedita quidem facilis. Vero sequi cupiditate nam ut, officiis minima iure reiciendis atque dolores obcaecati fugiat quas delectus exercitationem unde placeat facere rem modi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ipsa numquam officiis, sed odit amet molestias veniam obcaecati impedit optio iusto ipsam tempore mollitia voluptatibus, sint at magni consectetur velit!</p>
</div>
</body>
</html>

salida

Overlap one element over another with CSS - 4

Esperanza usted tiene gusto del artículo; por favor comparta sus pensamientos en los comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *