3

I'm new to html/css and I've just started wrapping my head around positioning but I seem to have a misunderstanding. Right now I'm trying to create a page header with a horizontal divider right below it. My header is positioned absolutely, with a top and left value of 0, and a height of 88. I thought that if I gave my horizontal divider position: relative, and a height of 5, it would end up right below my header. Instead, it's ending up at the very top of the page, and I'm confused as to why.

I would like to use this horizontal divider again on my page, right above my footer, so I don't want to give this horizontal divider position: absolute and top: 88px. Any help is appreciated, thanks so much!

My (very simple) code so far:

<div id="header"></div> <div class="horizontal-divider"></div> #header { position: absolute; top: 0px; left: 0px; height: 88px; width: 100%; } .horizontal-divider { position: relative; height: 5px; width: 100%; top: 0px; background-color: white; border: 1px solid black; }
Improve this question

4 Answers 4

Reset to default
4

Absolute positioning positions an element with respect to the edges of its containing block. Its containing block is its closest ancestor that has position set to anything that isn't static. It also takes the element out of normal flow, so it doesn't influence the position of anything that follows it.

Relative positioning positions an element with respect to where it would be positioned if it was position: static (not with respect to any other element).

Since #header is absolutely positioned, .horizontal-divider is not positioned after it.

If you want an element to be rendered immediately after an absolutely positioned element, then:

  1. Don't absolutely position the first element
  2. Place both elements in another (container) element (so they are laid out one after the other in normal flow)
  3. Absolutely position the container element

That said, you should be able to get the effect you are after by setting border-bottom on the header and removing the divider entirely.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

When any div is given absolute positioning, it is removed from the normal flow of the html page. And so, the horizontal rule and the other divs that follow act as if the header dint exist. Since, the header has a relative positioning, it is in the normal flow and its coming relative to the first div in the normal flow(which is none in this case) .So, its right at the top. Hope this helped.

Improve this answer

Comments

0

If you are trying to use position:absolute with position:relative then your position:absolute wrapper should be inside the position:relative then only there is benefit of using position:absolute

Like here is the example for you working Fiddle or you can follow the below code:

<!-- The CSS --> <style type="text/css"> #header { position: relative; top: 0px; left: 0px; height: 88px; width: 100%; background-color: #f00; } .horizontal-divider { background-color: #999; border: 1px solid #000; bottom: 0; height: 5px; position: absolute; width: 100%; } </style> <!-- The HTML --> <div id="header"> <div class="horizontal-divider"></div> </div>

A very good tutorial for positioning elements is here at CSS-Tricks

Improve this answer

Comments

0

If you give position relative to any of element then you can move that element to top, bottom, left or right. And its independent

The absolute element is dependent on its nearest relative parent. If you any element to be there within a box only. Then the position of that box must be relative.

Example:

<div class="example"> <div class="test"> <div class="child"> <p>Sample Text</p> </div> </div> </div>

If you want the paragraph tag to be there within a test div then the position of .test must be relative.

Similarly, if you want the paragraph tag to be there within a example div then the position of .example must be relative.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.