Geek Answers Handbook

Absolute and relative content is displayed differently.

My question is: If I am in a situation where the positioning relativeand absoluteshould have the same result (for example, if I use this position to the element div, which is the only element on the page), and I set a specific width for my element, why the contents divdisplayed po- different ways, and is there a way to fix this.

A simple example should help to understand:

Usage position: relative;:

.test-border {
  width: 800px;
  position: relative;
  border-left: 3px solid #DFDFDF;
}
<div class="test-border">
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
</div>
Run codeHide result

Usage position: absolute;:

.test-border {
  width: 800px;
  position: absolute;
  border-left: 3px solid #DFDFDF;
}
<div class="test-border">
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
</div>
Run codeHide result

If you view this page in a browser and replace it with an absolute relative, you will see that the list is not located in the same way when the container is absolute/ relative. This is true for Firefox and Chrome.

relative/absolute , , - , ;-)... , - ?

+4
2

, , , , . ul margin padding, . margin body margin, , -, "" .

http://www.w3.org/TR/CSS21/visuren.html#choose-position:

. , . , , .

, margin: 0; ul:

.test-border {
  width: 800px;
  position: absolute;
  border-left: 3px solid #DFDFDF;
}
.test-border ul {
  margin: 0;
}
<div class="test-border">
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
</div>
Hide result
+2

, , -. .

, , . "".

margin padding HTML-, , : http://jsfiddle.net/oc0n3vmL/

0

More articles:


All Articles