Home > Developer > Web Develop
Today, my colleague found an interesting question about position's hierarchical relationship, and he wouldn't say I didn't notice.
The test is interesting and needs to be studied in depth:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Position positioning attributes and hierarchical relationships in CSS</title>6 <styletype= "Text/css">7 #W{8 position:relative;9 }Ten . A{position:Absolute;} One #addTR{position:relative;width:200px;Height:30px;background:Seagreen;} A </style> - </Head> - <Body> the <DivID= "W"> - <DivID= "ADDTR"> - <P>Text</P> - </Div> + <Divclass= "a"> - <imgsrc= "Img/1.jpg"/> + </Div> A <Divclass= "a"> at <imgsrc= "Img/2.jpg"/> - </Div> - <Pstyle= "margin-top:500px;"> - Hierarchical Relationships - <BR/> - inThe first is to follow the rules of the DOM, at the back of the sibling.<BR/> - toElements that typically have positional properties are higher than sibling elements with no positional attributes.<BR/> + -Have the same sibling element of the positional attribute, z-index the large<BR/> the *If the element is non-sibling, the element itself is ignored, and the Z-index attribute of the ancestor element z-index the sibling of the contrast element,<BR/> $ </P>Panax Notoginseng </Div> - </Body> the </HTML>
A blogger's answer: Http://www.tuicool.com/articles/rmAzia
Explanation Original: http://www.elanblog.com/2014/03/04/postion-teach/
2017-04-18 15:13:12 End
Position positioning attributes and hierarchical relationships in CSS
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
