Home > Developer > Web Develop
About positioning in CSS using sub-parent (subclass absolute position and parent class relative position)
CSS is a cascading style sheet (full name: Cascading style Sheets) is a computer language used to represent file styles such as HTML (an application of the standard Universal Markup Language) or XML (a subset of the standard Universal Markup Language). CSS can not only statically modify the Web page, but also with a variety of scripting language dynamically to the elements of the page format. In fact, simple to understand the CSS, it is to be used to decorate and decorate the Web page of the label, thus play the role of layout and beautification of the page.
Position is a style in CSS style, understood from the English meaning is the position, is used to locate. There are several properties under its style, namely absolute, relative, static (default), fixed, and so on. We can find the specific use of Baidu, we are here to talk about the use of the son of absolute father.
The child absolute father means that in the case where the position property of the parent class is relative, and the position property of the subclass is absolute, then our subclass is not actually absolute in the body but in the scope of its parent class, It is best to set boundaries for the parent class.
Ii. Examples of simple use and drop-down menus for sub-absolute fathers(a) A simple example of a parent-child comparison1. Parent class does not use relative
Code Demo
1<! DOCTYPE html>23 45<meta charset= "Utf-8"/>6<title> Small demo of the father of the child </title>7<style type= "Text/css" >8 . Father {9 /*position:relative;*/Ten width:300px; One height:300px; Abackground-Color:blue; - } - the . Child { - Position:absolute; -top:30%; -left:30%; + width:100px; - height:100px; +background-Color:greenyellow; A } at</style> - - -<body> -<divclass= "Father" > - Father in<divclass= "Child" > - Child to</div> +</div> -</body> the * Picture presentation (Subclass child directly out of the parent class father)
2. The parent class uses the relative
Code Demo
1<! DOCTYPE html>23 45<meta charset= "Utf-8"/>6<title> Small demo of the father of the child </title>7<style type= "Text/css" >8 . Father {9 position:relative;Ten width:300px; One height:300px; Abackground-Color:blue; - } - the . Child { - Position:absolute; -top:30%; -left:30%; + width:100px; - height:100px; +background-Color:greenyellow; A } at</style> - - -<body> -<divclass= "Father" > - Father in<divclass= "Child" > - Child to</div> +</div> -</body> the * Picture presentation (This is still in the scope of the parent class)
3. Summary
If you want to position a div block or element in a specific range, and want the position of this element to be adjusted arbitrarily, then the parent may be a very effective but very stupid method, of course, you can also use the Display flex flexible box for typesetting.
(ii) drop-down menu case study 1. No drop-down menu with sub-Absolute parent
Code Demo
1<! DOCTYPE html>23 45<meta charset= "UTF-8" >6<title> drop-down menu case studies </title>7<link rel= "stylesheet" type= "Text/css" href= "Css/main.css"/>8<script src= "Js/head.js" type= "Text/javascript" charset= "Utf-8" ></script>9Ten One<body> A<div id= "Header" > -<div id= "Container" > -<!--logo Icon-- the<div id= "logo" style= "margin-top:20px;" > - -</div> -<!--/logo Icons-- +<!--head navigation bar-- -<ul id= "nav" style= "margin-left: -50px;font-size:18px;" > +<li> A<a style= "Border-bottom:solid 2px red;" href= "#" > Home </a> at</li> -<li> -<a href= "#" > Financial Products </a> -</li> -<li> -<a href= "#" > Financial Institutions </a> in</li> -<li> to<a href= "#" > Dealers </a> +</li> -<li> the<a href= "#" > Latest demand </a> *</li> $<li>Panax Notoginseng<a href= "#" > Docking Success </a> -</li> the<li id= "More" <!--style= "position:relative;" -->><!--Here the parent class does not use relative position-- +<a href= "#" > More </a> A<div id= "Dropdown" > the<a href= "#" > Policy guide </a><br/> +<a href= "#" > About us </a><br/> -<a href= "#" > Discussion area </a> $</div> $</li> - -</ul> the<!--/Head navigation bar-- -<!--sign Up--Wuyi<div id= "Sign" > the<a href= "#" > Login/</a> -<a href= "#" > Register/</a> Wu</div> -<!--/Sign-in registration- About<div id= "Clear" > $</div> -</div> -</div> -</body> A + Photo Demo
Before zooming
After zooming (changes in position released)
2. Use the drop-down menu for the child's absolute parent
Code Demo
1<! DOCTYPE html>23 45<meta charset= "UTF-8" >6<title> drop-down menu case studies </title>7<link rel= "stylesheet" type= "Text/css" href= "Css/main.css"/>8<script src= "Js/head.js" type= "Text/javascript" charset= "Utf-8" ></script>9Ten One<body> A<div id= "Header" > -<div id= "Container" > -<!--logo Icon-- the<div id= "logo" style= "margin-top:20px;" > - -</div> -<!--/logo Icons-- +<!--head navigation bar-- -<ul id= "nav" style= "margin-left: -50px;font-size:18px;" > +<li> A<a style= "Border-bottom:solid 2px red;" href= "#" > Home </a> at</li> -<li> -<a href= "#" > Financial Products </a> -</li> -<li> -<a href= "#" > Financial Institutions </a> in</li> -<li> to<a href= "#" > Dealers </a> +</li> -<li> the<a href= "#" > Latest demand </a> *</li> $<li>Panax Notoginseng<a href= "#" > Docking Success </a> -</li> the<li id= "More" style= "position:relative;" >//the relative position is used here +<a href= "#" > More </a> A<div id= "Dropdown" > the<a href= "#" > Policy guide </a><br/> +<a href= "#" > About us </a><br/> -<a href= "#" > Discussion area </a> $</div> $</li> - -</ul> the<!--/Head navigation bar-- -<!--sign Up--Wuyi<div id= "Sign" > the<a href= "#" > Login/</a> -<a href= "#" > Register/</a> Wu</div> -<!--/Sign-in registration- About<div id= "Clear" > $</div> -</div> -</div> -</body> A + Photo Demo
Before zooming
After zooming (the position is not changed after zooming, it is under more)
About positioning in CSS using sub-parent (subclass absolute position and parent class relative position)
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
