Home > Developer > Web Develop
Specific examples can help us to better understand the "position". The following is a real page layout.
Results:
The code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Position example</title> <style> * {box-sizing:Border-box; }. Container{position:relative;width:100%;Height:Auto;Border:3px Solid Green; }. Nav{position:Absolute;width:20%;Border:3px Solid Red; } Section{position:Static; /*default:static*/width:80%;Height:Auto;padding:20px 5px;Border:3px Solid Hotpink;Margin-left:20%; }. Footer{position:fixed;width:100%;Height:70px;Bottom:0; Left:0;Border:3px Solid Salmon;text-align:Center;Line-height:70px; } </style></Head><Body> <Divclass= "Container"> <Divclass= "NAV"> <ul> <Lihref="#"> <ahref="#">Home</a></Li> <Lihref="#"> <ahref="#">Tlico Menu</a></Li> <Lihref="#"> <ahref="#">Drlift List</a></Li> <Lihref="#"> <ahref="#">Hours</a></Li> <Lihref="#"> <ahref="#">Directions</a></Li> </ul> </Div> < Section>the section's margin-left style ensures that there is enough space to accommodate the nav element. </ Section> < Section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis Dolor. Maecenas NISL est, ultrices nec congue eget, Auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in Odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer Fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor Porta. Cras ac Leo Purus. Mauris quis diam velit. </ Section> < Section>Watch out for what happens when you adjust the browser window. The effect is great! </ Section> < Section>This example works correctly when the container is higher than the nav element. If the container is lower than the nav element, then nav overflows to the outside of the container. Then we'll discuss other layout techniques, all of which have pros and cons. </ Section> </Div> <Divclass= "Footer">If you use a fixed-positioned header or footer. </Div></Body></HTML>
This example works correctly when the container is higher than the nav element.
If the container is lower than the nav element, then nav overflows to the outside of the container.
Then we'll discuss other layout techniques, all of which have pros and cons.
Original address: http://zh.learnlayout.com/position-example.html
Learn CSS layouts-position examples
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
