You will also notice that vertical paddings, bor ders, and ma rgins of the <div> element,
which now has inline display, are totally disregarded by the surrounding elements. The
content box of the body is ju st high enough to contain the content box of the <div>
element, which is placed tightly around the text “I am a box.” If we removed the body’s
padding, then the top border of the <div> element might even move off the document
window. However, h orizontal paddings, borders, and margins of an inline element are
still respected by neighbor ing elements. It is important that you understand this, as it
influences the position ing of the elements.
5.4 Positioning and Element Flow
Professor: The next important concept connected with the placin g of elements on a
page is the element flow. Normally, elements appear on a page in the same order as
they do in the HTML file, which means that they are in the document flow or just in
the flow. If an element is in the flow, then other elements respect its presen ce and
place themselves accordingly. For example, if there’s a para graph after a table in the
HTML file, then the paragraph w ill move f urther down if the ta ble is made larger, and
will move up if the table shortens.
Technically, we control the element’s flow with the position property. This prop-
erty can take a couple of keyword values, of which we’ll stud y the values static,
absolute, and rela tive. The default value is static, which puts the element in
the normal flow.
Depending on the value o f the position property, we usually say that an ele ment is
absolutely positioned, relatively p ositioned, or not positioned, if the position prop-
erty is set to static. Absolutely and relatively p ositioned elements are of te n referred
to as positioned.
Let’s carry out a little experiment. Consider, for example, the following piece of
HTML code:
80 Meeting 5. Understanding CSS Boxes
<body>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</body>
Consider also the following CSS style:
div {
width: 40px;
height: 40px;
border: 1px solid;
padding: 5px;
margin: 5px;
}
Because the <div> element has block display, the document window shows the three
boxes one above the other, as you can see on the screenshot.
Let’s set the position property of the second e le ment to relative. Doing so, the el-
ement stays in the flow but can be displaced by any desired distance without disturbing
the other elements’ positions. The other elements behave exactly as though the rela-
tively positione d element was in the normal document flow. Consider, for example,
the following rule:
#two {
position: relative;
top: 10px;
left: 25px;
}
You set the exact p osition of a n element using th e properties top, right, bottom, and
left. Contr ary to what you might thin k, these properties do not denote the direction
of movement, but rather specify the space that is to be inserted at the corresponding
side of the element. For example, the declaratio n left: 25px; means that 25 px
space will be inserted at the left side o f the element, which effectively moves the
element to the right.
5.4. Positioning and Element Flow 81
Applying the above rule to our HTML, the second element moves 10 px down and
25 px to the right while the other two elements stay in place as though nothing hap-
pened. You can see this on the following screenshot.
Do you follow me?
Mike: Yes, no problem.
Maria: It’s lots of information all right, but nothing that I couldn’t und erstand.
Professor: All right then. Because the absolute positioning is a bit more tricky. We
now replace our last style with the next one, which ta kes the second element out of
the flow:
#two {
position: absolute;
}
With the second element taken out of the flow, the third element takes the position
where th e second element was befor e. Namely, th e third element is no longer aware
of the presence of the second one. Here’s how it looks.
Maria: The second element has also moved. How do we k now where an element will
move whe n we take it out of the flow?
Professor: The elemen t in fact didn’t move. Basically, it stayed where it had been
before we took it out of the flow.
But you’re right, the element has slightly changed its position. The reason is that verti-
cal margins of the absolutely positioned elements don’t collapse. When we absolutely
positioned th e second elemen t, it moved down by the amount of its top margin width.
82 Meeting 5. Understanding CSS Boxes
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.