About positioning in CSS using sub-parent (subclass absolute position and parent class relative position)

Source: Internet
Author: User

About positioning in CSS using sub-parent (subclass absolute position and parent class relative position)

    • Foreword: Recently in learning Javaweb front-end CSS, about the positioning of CSS may sometimes be used to the sub-father, due to my limited level if there is any place to say wrong, please point out that I am good to change in a timely manner.
first, what is CSS and position(i) CSS Overview

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.


(ii) Position Overview

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.


(iii) Summary of the sub-absolute fathers

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 comparison

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.