關於CSS中的定位使用子絕父相（子類絕對位置和父類相對位置）

JNovice發表於2018-08-26
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

　　　程式碼演示

 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>

　　圖片演示

　　縮放前

　　縮放後（縮放後位置沒有發生變化，都是在更多的下方）

 

　　　　3.總結

　　　　用子絕父相來製作下拉選單，真的很具有實用性，可以保證在縮放的情況下，還能使得下拉選單在相對應的範圍內。

 

相關文章