關於CSS中的定位使用子絕父相（子類絕對位置和父類相對位置）
阿新 • • 發佈：2018-08-26
需求 style 主頁 計算機 美化 情況下 mar head div
二、子絕父相的簡單使用和下拉菜單的案例
關於CSS中的定位使用子絕父相（子類絕對位置和父類相對位置）
- 前言：最近在學習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
代碼演示
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>子絕父相的小演示</title> 7 <style type="text/css"> 8 .father { 9 /*position: relative;*/ 10 width: 300px; 11 height: 300px; 12 background-color: blue; 13 } 14 15 .child { 16 position: absolute; 17 top: 30%; 18 left: 30%; 19 width: 100px; 20 height: 100px; 21 background-color: greenyellow; 22 } 23 </style> 24 </head> 25 26 <body> 27 <div class="father"> 28 father 29 <div class="child"> 30 child 31 </div> 32 </div> 33 </body> 34 35 </html>
圖片演示(子類child直接脫離了父類father)
2.父類使用了relative
代碼演示
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>子絕父相的小演示</title> 7 <style type="text/css"> 8 .father { 9 position: relative; 10 width: 300px; 11 height: 300px; 12 background-color: blue; 13 } 14 15 .child { 16 position: absolute; 17 top: 30%; 18 left: 30%; 19 width: 100px; 20 height: 100px; 21 background-color: greenyellow; 22 } 23 </style> 24 </head> 25 26 <body> 27 <div class="father"> 28 father 29 <div class="child"> 30 child 31 </div> 32 </div> 33 </body> 34 35 </html>
圖片演示(此時還是在父類的範圍中)
3.總結
如果想將一個div塊或者元素定位在一個具體的範圍之內，又想讓這個元素的位置可以隨意調整，那麽子絕父相可能就是一個很有效但是又很笨的方法，當然也可以使用display的flex彈性盒子進行排版。
（二) 下拉菜單的案例分析
1.沒有使用子絕父相的下拉菜單
代碼演示
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>下拉菜單的案例分析</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> 9 </head> 10 11 <body> 12 <div id="header"> 13 <div id="container"> 14 <!--logo圖標--> 15 <div id="logo" style="margin-top: 20px;"> 16 <img src="img/logo/logo.png" href="#"> 17 </div> 18 <!--/logo圖標--> 19 <!--頭部導航欄--> 20 <ul id="nav" style="margin-left: -50px;font-size: 18px;"> 21 <li> 22 <a style="border-bottom: solid 2px red;" href="#">主頁</a> 23 </li> 24 <li> 25 <a href="#">金融產品</a> 26 </li> 27 <li> 28 <a href="#">金融機構</a> 29 </li> 30 <li> 31 <a href="#">經銷商</a> 32 </li> 33 <li> 34 <a href="#">最新需求</a> 35 </li> 36 <li> 37 <a href="#">對接成功</a> 38 </li> 39 <li id="more" <!--style="position: relative;"-->><!--此處父類沒有使用相對位置--> 40 <a href="#">更多</a> 41 <div id="dropdown"> 42 <a href="#"><img src="img/small/home_img1.png" />政策指南</a><br /> 43 <a href="#"><img src="img/small/home_img2.png" />關於我們</a><br /> 44 <a href="#"><img src="img/small/home_img3.png" />討論專區</a> 45 </div> 46 </li> 47 48 </ul> 49 <!--/頭部導航欄--> 50 <!--登錄註冊--> 51 <div id="sign"> 52 <a href="#">登錄/</a> 53 <a href="#">註冊/</a> 54 </div> 55 <!--/登錄註冊--> 56 <div id="clear"> 57 </div> 58 </div> 59 </div> 60 </body> 61 62 </html>
圖片演示
縮放前
縮放後（位置放生了變化）
2.使用了子絕父相的下拉菜單
代碼演示
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>下拉菜單的案例分析</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> 9 </head> 10 11 <body> 12 <div id="header"> 13 <div id="container"> 14 <!--logo圖標--> 15 <div id="logo" style="margin-top: 20px;"> 16 <img src="img/logo/logo.png" href="#"> 17 </div> 18 <!--/logo圖標--> 19 <!--頭部導航欄--> 20 <ul id="nav" style="margin-left: -50px;font-size: 18px;"> 21 <li> 22 <a style="border-bottom: solid 2px red;" href="#">主頁</a> 23 </li> 24 <li> 25 <a href="#">金融產品</a> 26 </li> 27 <li> 28 <a href="#">金融機構</a> 29 </li> 30 <li> 31 <a href="#">經銷商</a> 32 </li> 33 <li> 34 <a href="#">最新需求</a> 35 </li> 36 <li> 37 <a href="#">對接成功</a> 38 </li> 39 <li id="more" style="position: relative;">//此處使用了相對位置 40 <a href="#">更多</a> 41 <div id="dropdown"> 42 <a href="#"><img src="img/small/home_img1.png" />政策指南</a><br /> 43 <a href="#"><img src="img/small/home_img2.png" />關於我們</a><br /> 44 <a href="#"><img src="img/small/home_img3.png" />討論專區</a> 45 </div> 46 </li> 47 48 </ul> 49 <!--/頭部導航欄--> 50 <!--登錄註冊--> 51 <div id="sign"> 52 <a href="#">登錄/</a> 53 <a href="#">註冊/</a> 54 </div> 55 <!--/登錄註冊--> 56 <div id="clear"> 57 </div> 58 </div> 59 </div> 60 </body> 61 62 </html>
圖片演示
縮放前
縮放後（縮放後位置沒有發生變化，都是在更多的下方）
關於CSS中的定位使用子絕父相（子類絕對位置和父類相對位置）