CSS Positioning
description
Transcript of CSS Positioning
![Page 1: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/1.jpg)
CSS PositioningCS 3550
Dr. Brian Durney
![Page 2: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/2.jpg)
The CSS position propertyPlace an HTML element within a container
Four possible values:staticrelativeabsolutefixed
![Page 3: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/3.jpg)
Specifying a positiontopleftbottomright
heightwidth
<img src="L2.png"style="position: relative; left: 100px; top: 20px;">
![Page 4: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/4.jpg)
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>
![Page 5: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/5.jpg)
staticThe 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.
![Page 6: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/6.jpg)
Positioned element is in the normal flow.
left and top values are ignored.
<img src="L2.png"style="position: static; left: 100px; top: 20px;">
![Page 7: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/7.jpg)
relativeThe 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.
![Page 8: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/8.jpg)
Positioned element is displaced within containing element.
Original position is left empty.
<img src="L2.png"style="position: relative; left: 100px; top: 20px;">
![Page 9: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/9.jpg)
absoluteThe 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.
![Page 10: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/10.jpg)
Positioned element is placed within containing element.
Original position is not left empty.
<img src="L2.png"style="position: absolute; left: 100px; top: 20px;">
![Page 11: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/11.jpg)
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>
![Page 12: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/12.jpg)
fixedThe 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.
![Page 13: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/13.jpg)
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;">
![Page 14: CSS Positioning](https://reader034.fdocuments.in/reader034/viewer/2022051416/56814553550346895db22463/html5/thumbnails/14.jpg)
SummaryPosition 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