Relative and absolute positioning confusion

问题:

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;
}

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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.