CODEWITHSUNDEEP
htmlcss
Sara Ree
Sara Ree

Reputation: 3543

absolute positioning disappears the element

I want a very thin horizontal line. (The result of the code below is exactly what I want)

The problem is If I want to set the position to absolute the line disappears?!

What I'm missing?

I've tried to change the position using margins but still...

.nav-bar {
  /*position: absolute;*/
  border-bottom: 1px solid rgba(204,193,218,1);
  margin-top: 60vh;
  margin-left: 10vw;
}
<!DOCTYPE html>
<html>
<head> 
</head>
<body> 
<div class="nav-bar">
</body>
</html>

Upvotes: 0

Views: 86

Answers (3)

Run_Script
Run_Script

Reputation: 2548

You're missing width: 100%;. div elements have this by default if they are normally positioned, but it needs to be manually set the you are using relative positioning.

At the moment, your line is being displayed with a width of 0, which is why you can't see it.

Also note: your div was missing a closing tag, I have fixed that in the code snippet below.

.nav-bar {
  width: 100%;
  position: absolute;
  border-bottom: 1px solid rgba(204, 193, 218, 1);
  margin-top: 60vh;
  margin-left: 10vw;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="nav-bar">
  </div>
</body>

</html>

Upvotes: 2

Anis R.
Anis R.

Reputation: 6922

When you use position: absolute, you need to explicitly specify the element's width and height. And on a side note, your div does not have a closing tag.

.nav-bar {
  position: absolute;
  border-bottom: 1px solid rgba(204,193,218,1);
  margin-top: 60vh;
  margin-left: 10vw;
  width:100%;
  height:50px;
}
<!DOCTYPE html>
<html>
<head> 
</head>
<body> 
<div class="nav-bar"> </div>
</body>
</html>

Upvotes: 1

Matt Croak
Matt Croak

Reputation: 2888

Unless you specify either width or left/right positioning the element will be rendered with a width of 0. So you need to either write this 

.nav-bar {
  position: absolute;
  left:0px;
  right: 0px;
  border-bottom: 1px solid rgba(204,193,218,1);
  margin-top: 60vh;
  margin-left: 10vw;
}

Or this

.nav-bar {
  position: absolute;
  width: 100%;
  border-bottom: 1px solid rgba(204,193,218,1);
  margin-top: 60vh;
  margin-left: 10vw;
}


.nav-bar {
  position: absolute;
  /*left:0px;
  right: 0px;*/
  border-bottom: 1px solid rgba(204,193,218,1);
  margin-top: 60vh;
  margin-left: 10vw;
  width: 100%;
}
<!DOCTYPE html>
<html>
<head> 
</head>
<body> 
<div class="nav-bar"/>
</body>
</html>

Upvotes: 2

Related Questions