<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <navl> <ul> <li><img src="" alt="logo"></li> <li><input type="search"></li> <li><img src="" alt="hit"></li> </ul> </navl> <navr> <ul> <li><img src="" alt=""dp></li> <li>Name</li> <li>i1</li> <li>i2</li> <li>i3</li> <li>i4</li> <li>i5</li> </ul> </navr> </nav> <main> <left> <span>left</span> </left> <center> <span>center</span> </center> <right> <span>right</span> </right> </main> </body> </html> *{ padding: 0vw; margin: 0vw; } nav{ background-color: rgba(52, 52, 146, 0.829); display: inline-flex; justify-content: space-around; align-items: center; width: 100vw; height: 45px; position:sticky; } ul { display: inline-flex; list-style-type:none; } navl{ border-color:red ; border-style: dotted; align-items: center; } navr{ border-color:red ; border-style: dotted; } main{ justify-content: space-between; display: flex; } left{ border-color: red; border-style: dotted; width: 30vw; height: 400px; display: inline-flex; position: sticky; } center{ border-color: red; border-style: dotted; width: 35vw; height:5000px; display: inline-flex; } right{ border-color: red; border-style: dotted; width: 30vw; height: 300px; display: inline-flex; }¿Por qué la posición de la barra de navegación: el atributo fijo no funciona? Pero si configuro la posición en fijo, funciona en ese caso. Quiero que se fije en la parte superior a medida que nos desplazamos como Facebook. Estoy tratando de crear un clon-facebook. Soy principiante tratando de aprender desarrollo web. El primer código es HTML mientras que el segundo es la hoja de estilo CSS
Simplemente agregue la parte superior: 0; e índice z: 9999;
* { padding: 0vw; margin: 0vw; } nav { background-color: rgba(52, 52, 146, 0.829); display: inline-flex; justify-content: space-around; align-items: center; width: 100vw; height: 45px; position: sticky; z-index: 9999; top: 0; } ul { display: inline-flex; list-style-type: none; } navl { border-color: red; border-style: dotted; align-items: center; } navr { border-color: red; border-style: dotted; } main { justify-content: space-between; display: flex; } left { border-color: red; border-style: dotted; width: 30vw; height: 400px; display: inline-flex; position: sticky; } center { border-color: red; border-style: dotted; width: 35vw; height: 5000px; display: inline-flex; } right { border-color: red; border-style: dotted; width: 30vw; height: 300px; display: inline-flex; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <navl> <ul> <li><img src="" alt="logo"></li> <li><input type="search"></li> <li><img src="" alt="hit"></li> </ul> </navl> <navr> <ul> <li><img src="" alt=""dp></li> <li>Name</li> <li>i1</li> <li>i2</li> <li>i3</li> <li>i4</li> <li>i5</li> </ul> </navr> </nav> <main> <left> <span>left</span> </left> <center> <span>center</span> </center> <right> <span>right</span> </right> </main> </body> </html>