CS 3550 Dr Brian Durney The CSS position property Place an HTML element within a container Four possible values static relative absolute fixed Specifying a position top left bottom right ID: 397036
Download Presentation The PPT/PDF document "CSS Positioning" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CSS Positioning
CS 3550
Dr. Brian
DurneySlide2
The CSS position property
Place an HTML element within a container
Four possible values:
static
relative
absolute
fixedSlide3
Specifying a position
top
left
bottom
right
height
width
<
img
src
="L2.png"
style="position: relative; left: 100px; top: 20px;">Slide4
L2.png
No positioning: element is in the normal flow.
<div class="
LDiv
" style="background: #ED8">
<
img
src
="L2.png">
orem
ipsum
dolor sit
amet
,
consectetur
...
</div>Slide5
static
The browser uses its usual layout rules to determine the position of the element within the document flow.
Default value for position.
Element cannot be positioned with top, left, etc.Slide6
Positioned element is in the normal flow.
left
and
top
values are ignored.
<
img
src
="L2.png"
style="position: static; left: 100px; top: 20px;">Slide7
relative
The browser first allocates space for the positioned element in the normal flow.
Then the browser shifts the positioned element as specified by
top
,
left
, etc.Original space allocated for positioned element is still allocated.Subsequent elements are not affected.Slide8
Positioned element is displaced within containing element.
Original position is left empty.
<
img
src
="L2.png"
style="position: relative; left: 100px; top: 20px;">Slide9
absolute
The browser removes the element from its containing flow and positions it with respect to the document body (or another positioned element).
Subsequent elements are moved up to take the place of the relocated element.Slide10
Positioned element is placed within
containing element.
Original position is not left empty.
<
img
src
="L2.png"
style="position: absolute; left: 100px; top: 20px;">Slide11
Div is not positioned. The image is placed with respect to the body of the document.
<
img
src
="L2.png"
style="position: absolute; left: 100px; top: 20px;">
Div is positioned. The image is placed with respect to the div.
<div style="
position:relative
">
<
img
src
="L2.png"
style
="...">
</div>
<div>
<
img
src
="L2.png"
style
="...">
</div>Slide12
fixed
The browser positions the element with respect to the browser window in which it is displayed.
The element does not move when the window is scrolled.Slide13
Positioned element is placed within browser window.
Element does not move when window is scrolled.
<
img
src
="L2.png"
style="position: fixed; left: 100px; top: 20px;">Slide14
Summary
P
osition of an element can be
static
,
relative,
absolute, or fixed.left,
top, right, and
bottom properties Numerically specify the element’s positionIgnored if position is staticMeasured
with respect to a containing element, the document body, or the window, depending on the type of position