Course Hero Logo

Absolute positioning an absolutely positioned item is

Course Hero uses AI to attempt to automatically extract content from documents to surface to you and others so you can study better, e.g., in search results, to enrich docs, and more. This preview shows page 33 - 37 out of 139 pages.

Absolute positioningAn absolutely positioned item is taken out ofow, and canthen be positioned from the edge of its containing block usingthe physical oset properties. In my next example, I have acontainer with a second box nested inside it. The inner box isset toposition: absolute..container {width: 400px;height: 300px;}.box {position: absolute;top: 10px;right: 10px;width: 200px;}Code example:The containing block in this example is the viewport, sincethere is no other parent element creating a containing blockfor this element. In my example page, this will make the boxoverlap the menubar!
28THE NEW CSS LAYOUTIf we want this box to be positioned inside the container, andto have the osets calculated from the edge of the container,we need to establish a containing block on that container. Wedo this by addingposition: relativeto.container(3.7)..container {width: 400px;height: 300px;position: relative;}I have set a height on my container. If I remove that height,the container will collapse, no longer respecting the height ofthe element inside. That’s because the box has been taken outofow, so it doesn’t participate in layout decisions made bythose elements.Fixed positioningWhen we absolutely position an item, it appears where wepositioned it as the page loads. As the document scrolls, theelement will scroll with the rest of the content. Fixed posi-tioning enables items to assume axed place on screen as thedocument loads, and then stay in that place instead of scrollingwith the rest of the page.Axed-position box also uses physical osets, which posi-tion it in relation to the viewport. In my next example, I have axed-position box that is one hundred pixels from the top andsixty pixels from the right of the viewport (3.8)..box {width: 200px;top: 100px;right: 60px;position: fixed;}Code example:
29THE NEW LAYOUT3.7:The absolutely positionedbox is now oset from thecontainer.3.8:Thexed-position item always remains relative to the position oset from theviewport.As we scroll, the box remains in that position (3.8).A common reason to usexed positioning is to keep a menuon screen when scrolling through a long document.Notice that the box is taken out ofow and so will overlapcontent, as in this example—if the viewport becomes narrower,there isn’t a space in the margin for the box to sit in. If youdon’t want overlapping to occur, then you need to manage thelayout so there is always a space for the box. This is typicallythe case for absolutely andxed-positioned items; once the item
30THE NEW CSS LAYOUTis out ofow, you need to have a plan for how to deal with anyoverlap that may occur.Sticky positioningA newer value ofpositionacts like a hybrid of static andxed positioning. We already know that static positioning isthe initial value for everything that loads on your page; staticitems are inow and scroll with the document. We have alsoseen that items withxed positioning stay in place relative tothe viewport while the rest of the document scrolls. An itemwith

Upload your study docs or become a

Course Hero member to access this document

Upload your study docs or become a

Course Hero member to access this document

End of preview. Want to read all 139 pages?

Upload your study docs or become a

Course Hero member to access this document

Term
Spring
Professor
Luke Papademas
Tags
Web Design, Cascading Style Sheets, T H E N E W C S S L

Newly uploaded documents

Show More

Newly uploaded documents

Show More

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture