En este artículo, aprenderemos cómo usar la propiedad de posición de CSS para manipular la posición de los pseudo elementos :before. La posición: la propiedad relativa es relativa a su padre. Tiene propiedades izquierda, derecha, arriba, abajo que ayudan a posicionar las coordenadas de los elementos. Además, sabremos cómo manipular la posición de los pseudo elementos :before usando la propiedad de posición .
Sintaxis:
position: static|relative|absolute|fixed|sticky
La propiedad de posición se puede utilizar para especificar la distancia de un elemento HTML desde el borde de la ventana gráfica. Muchos sitios web usan colores de fondo antes de la barra de navegación. Podemos usar el color de fondo para cubrir solo el ancho y el alto de la barra de navegación usando Posición: relativa.
Enfoque: Usaremos todas las listas requeridas para la barra de navegación en el archivo HTML. Luego, proporcionaremos el relleno requerido, el margen para diseñar las listas usando CSS. Usando :before selector, proporcionaremos el color de fondo, para cubrir solo el ancho y el alto de la barra de navegación. Estableceremos posición: relativa en la barra de navegación para establecer el color de fondo.
Ejemplo 1 : El siguiente ejemplo ilustra la implementación del enfoque anterior que usa el valor de propiedad relativo para establecer el color de fondo para cubrir el ancho y el alto de la barra de navegación.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
/* Providing bg colour before navbar */
#navbar::before {
content: "";
background-color: grey;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.1;
}
/* Navbar Designing */
#navbar {
overflow: auto;
/* Background color to only cover
the width and height of the
navigation bar */
position: relative;
}
#nav-container {
float: right;
display: flex;
}
#nav-container ul {
display: flex;
flex-direction: row;
}
#nav-container ul li {
list-style: none;
padding: 16px 16px;
}
#nav-container ul li a {
text-decoration: none;
color: black;
font-size: 1.5rem;
}
</style>
</head>
<body>
<header id="navbar">
<nav id="nav-container">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Locations</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Reach Us</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
Producción:
Podemos proporcionar una imagen de fondo antes de la página de inicio o la sección de nuestro sitio web. Después de agregar un encabezado, párrafo o agregar un botón dentro de la sección, la posición: la propiedad relativa coloca la imagen de fondo para cubrir solo el ancho y el alto de la sección.
Enfoque: Usaremos el encabezado y agregaremos algunos párrafos después del encabezado usando HTML. Usando propiedades flexibles , centraremos los elementos dentro de la sección y daremos un mejor diseño usando CSS. Usando :before selector, proporcionaremos la imagen de fondo, para cubrir solo el ancho y el alto de la página de inicio. Estableceremos posición: relativa en la página de inicio para establecer la imagen de fondo.
Ejemplo 2: El siguiente ejemplo ilustra la implementación del enfoque anterior que usa el valor de propiedad relativo para configurar la imagen de fondo para cubrir el ancho y el alto de la página de inicio.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tricks in CSS</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
/* Providing bg colour before navbar */
#navbar::before {
content: "";
background-color: grey;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.1;
}
/* Navbar designing*/
#navbar {
overflow: auto;
position: relative;
}
#nav-container {
float: right;
display: flex;
}
#nav-container ul {
display: flex;
flex-direction: row;
}
#nav-container ul li {
list-style: none;
padding: 16px 16px;
}
#nav-container ul li a {
text-decoration: none;
color: black;
font-size: 1.5rem;
}
/* Home page */
#home-id {
display: inline-block;
width: 100vw;
height: 64vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* To position the background
image before section */
position: relative;
}
/* Home background image*/
#home-id::before {
content: "";
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220328131201/download3.png')
no-repeat center center/cover;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.9;
}
.center {
text-align: center;
}
/* Home section button */
#home-id button {
padding: 10px;
font-size: 0.8rem;
font-weight: bold;
letter-spacing: 1px;
border-color: transparent;
margin-top: 180px;
}
</style>
</head>
<body>
<header id="navbar">
<nav id="nav-container">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Locations</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Reach Us</a>
</li>
</ul>
</nav>
</header>
<section id="home-container">
<div id="home-id">
<button>Click to know more</button>
</div>
</section>
</body>
</html>
Producción:
Podemos proporcionar la misma imagen o varias imágenes al contenedor. Usando position:relative , podemos manipular imágenes para establecer solo el ancho y la altura del contenedor.
Enfoque: Usaremos 3 cajas usando y estableceremos el ancho y la altura de las cajas usando CSS. Usando :before selector, agregaremos algunas imágenes, y para cubrir el contenedor, usaremos position:relative.
Ejemplo 3: El siguiente ejemplo ilustra la implementación del enfoque anterior que utiliza la posición relativa para establecer la imagen de fondo que cubre los contenedores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tricks in CSS</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
#boxes {
display: flex;
height: 93vh;
flex-direction: row;
justify-content: center;
align-items: center;
}
#box-1 {
border: 2px solid green;
width: 20vw;
height: 31vh;
margin: 10px;
/* To make the image
as a coverage to the 3 boxes */
position: relative;
}
#box-1:before {
content: "";
background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220328131201/download3.png');
background-repeat: no-repeat;
background-position: center;
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<section id="boxes-container">
<div id="boxes-all">
<div id="boxes">
<div id="box-1"> </div>
<div id="box-1"> </div>
<div id="box-1"> </div>
</div>
</div>
</section>
</body>
</html>
Producción:
