关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

欢迎转发，但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html
前言：最近在学习JavaWeb前端的CSS，关于CSS中的定位有时候可能会使用到子绝父相，由于本人的水平有限如果有什么地方说错了，请指出来我好进行及时地修改。

一、什么是CSS以及position

（一） CSS概述

　　CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。其实简单点去理解CSS，它就是想当于装饰器用来点缀和装饰网页的标签，从而起到对网页进行布局排版和美化的作用。

（二） position概述

　　position是CSS样式中一个样式，从英文意思理解就是位置，就是用来定位的。其样式下有几个属性，分别是absolute、relative、static(默认)、fixed等等。大家可以自行百度查找具体用法，我们这里主要要讲的是子绝父相的用法。

（三）子绝父相概述

　　子绝父相的意思是在父类的position属性是relative的情况下，子类的position属性又是absolute的情况下，那么我们的子类这时其实不是在body中absolute而是在其父类的范围中absolute，最好给父类设置边界。

二、子绝父相的简单使用和下拉菜单的案例

（一) 子绝父相的简单例子对比

　　　　1.父类没有使用relative

　　　代码演示

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>子绝父相的小演示</title>

         <style type="text/css">

             .father {

                 /*position: relative;*/

                 width: 300px;

                 height: 300px;

                 background-color: blue;

             }

             .child {

                 position: absolute;

                 top: 30%;

                 left: 30%;

                 width: 100px;

                 height: 100px;

                 background-color: greenyellow;

             }

         </style>

     </head>

     <body>

         <div class="father">

             father

             <div class="child">

                 child

             </div>

         </div>

     </body>

 </html>

　　　图片演示(子类child直接脱离了父类father)

关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

　　　　2.父类使用了relative

　　　代码演示

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>子绝父相的小演示</title>

         <style type="text/css">

             .father {

                 position: relative;

                 width: 300px;

                 height: 300px;

                 background-color: blue;

             }

             .child {

                 position: absolute;

                 top: 30%;

                 left: 30%;

                 width: 100px;

                 height: 100px;

                 background-color: greenyellow;

             }

         </style>

     </head>

     <body>

         <div class="father">

             father

             <div class="child">

                 child

             </div>

         </div>

     </body>

 </html>

　　　　图片演示(此时还是在父类的范围中)

　　　　3.总结

　　　如果想将一个div块或者元素定位在一个具体的范围之内，又想让这个元素的位置可以随意调整，那么子绝父相可能就是一个很有效但是又很笨的方法，当然也可以使用display的flex弹性盒子进行排版。

（二) 下拉菜单的案例分析

　　　　1.没有使用子绝父相的下拉菜单

　　　　代码演示

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>下拉菜单的案例分析</title>

         <link rel="stylesheet" type="text/css" href="css/main.css" />

         <script src="js/head.js" type="text/javascript" charset="utf-8"></script>

     </head>

     <body>

         <div id="header">

             <div id="container">

                 <!--logo图标-->

                 <div id="logo" style="margin-top: 20px;">

                     <img src="img/logo/logo.png" href="#">

                 </div>

                 <!--/logo图标-->

                 <!--头部导航栏-->

                 <ul id="nav" style="margin-left: -50px;font-size: 18px;">

                     <li>

                         <a style="border-bottom: solid 2px red;" href="#">主页</a>

                     </li>

                     <li>

                         <a href="#">金融产品</a>

                     </li>

                     <li>

                         <a href="#">金融机构</a>

                     </li>

                     <li>

                         <a href="#">经销商</a>

                     </li>

                     <li>

                         <a href="#">最新需求</a>

                     </li>

                     <li>

                         <a href="#">对接成功</a>

                     </li>

                     <li id="more" <!--style="position: relative;"-->><!--此处父类没有使用相对位置-->

                         <a href="#">更多</a>

                         <div id="dropdown">

                             <a href="#"><img src="img/small/home_img1.png" />政策指南</a><br />

                             <a href="#"><img src="img/small/home_img2.png" />关于我们</a><br />

                             <a href="#"><img src="img/small/home_img3.png" />讨论专区</a>

                         </div>

                     </li>

                 </ul>

                 <!--/头部导航栏-->

                 <!--登录注册-->

                 <div id="sign">

                     <a href="#">登录/</a>

                     <a href="#">注册/</a>

                 </div>

                 <!--/登录注册-->

                 <div id="clear">

                 </div>

             </div>

         </div>

     </body>

 </html>

　　图片演示

　　缩放前

　　缩放后（位置放生了变化）

　　　　2.使用了子绝父相的下拉菜单

　　　　 代码演示

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>下拉菜单的案例分析</title>

         <link rel="stylesheet" type="text/css" href="css/main.css" />

         <script src="js/head.js" type="text/javascript" charset="utf-8"></script>

     </head>

     <body>

         <div id="header">

             <div id="container">

                 <!--logo图标-->

                 <div id="logo" style="margin-top: 20px;">

                     <img src="img/logo/logo.png" href="#">

                 </div>

                 <!--/logo图标-->

                 <!--头部导航栏-->

                 <ul id="nav" style="margin-left: -50px;font-size: 18px;">

                     <li>

                         <a style="border-bottom: solid 2px red;" href="#">主页</a>

                     </li>

                     <li>

                         <a href="#">金融产品</a>

                     </li>

                     <li>

                         <a href="#">金融机构</a>

                     </li>

                     <li>

                         <a href="#">经销商</a>

                     </li>

                     <li>

                         <a href="#">最新需求</a>

                     </li>

                     <li>

                         <a href="#">对接成功</a>

                     </li>

                     <li id="more" style="position: relative;">//此处使用了相对位置

                         <a href="#">更多</a>

                         <div id="dropdown">

                             <a href="#"><img src="img/small/home_img1.png" />政策指南</a><br />

                             <a href="#"><img src="img/small/home_img2.png" />关于我们</a><br />

                             <a href="#"><img src="img/small/home_img3.png" />讨论专区</a>

                         </div>

                     </li>

                 </ul>

                 <!--/头部导航栏-->

                 <!--登录注册-->

                 <div id="sign">

                     <a href="#">登录/</a>

                     <a href="#">注册/</a>

                 </div>

                 <!--/登录注册-->

                 <div id="clear">

                 </div>

             </div>

         </div>

     </body>

 </html>

　　图片演示

　　缩放前

关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

　　缩放后（缩放后位置没有发生变化，都是在更多的下方）

关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

　　　　3.总结

　　　　用子绝父相来制作下拉菜单，真的很具有实用性，可以保证在缩放的情况下，还能使得下拉菜单在相对应的范围内。