1 / 14

Understanding the CSS Position Property: Static, Relative, Absolute, and Fixed

This guide explores the CSS position property and how to effectively use it to position HTML elements within a container. Learn about the four possible values: static, relative, absolute, and fixed, and understand their behaviors. Discover how to specify positions using top, left, bottom, and right properties, and see examples for each positioning type. Mastering these concepts is crucial for creating responsive and well-structured web layouts.

kuniko
Download Presentation

Understanding the CSS Position Property: Static, Relative, Absolute, and Fixed

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Positioning CS 3550 Dr. Brian Durney

  2. The CSS position property • Place an HTML element within a container • Four possible values: • static • relative • absolute • fixed

  3. Specifying a position • top • left • bottom • right • height • width <imgsrc="L2.png" style="position: relative; left: 100px; top: 20px;">

  4. No positioning: element is in the normal flow. L2.png <div class="LDiv" style="background: #ED8"> <imgsrc="L2.png"> oremipsum dolor sit amet, consectetur ... </div>

  5. 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.

  6. Positioned element is in the normal flow. left and top values are ignored. <imgsrc="L2.png" style="position: static; left: 100px; top: 20px;">

  7. 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.

  8. Positioned element is displaced within containing element. Original position is left empty. <imgsrc="L2.png" style="position: relative; left: 100px; top: 20px;">

  9. 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.

  10. Positioned element is placed within containing element. Original position is not left empty. <imgsrc="L2.png" style="position: absolute; left: 100px; top: 20px;">

  11. Div is not positioned. The image is placed with respect to the body of the document. Div is positioned. The image is placed with respect to the div. <imgsrc="L2.png" style="position: absolute; left: 100px; top: 20px;"> <div> <imgsrc="L2.png" style="..."> </div> <div style="position:relative"> <imgsrc="L2.png" style="..."> </div>

  12. 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.

  13. Positioned element is placed within browser window. Element does not move when window is scrolled. <imgsrc="L2.png" style="position: fixed; left: 100px; top: 20px;">

  14. Summary • Position of an element can be static, relative, absolute, or fixed. • left, top, right, and bottom properties • Numerically specify the element’s position • Ignored if position is static • Measured with respect to a containing element, the document body, or the window, depending on the type of position

More Related