CSS定位中“父相子絕”

阿新 • • 發佈：2018-12-17

一、定位的介紹

　　定位有三種：相對定位(position:relative)、絕對定位(position:absolute)、固定定位(position:fixed)

二、三種定位的用法，特點和例項

2.1、相對定位　　特性：不脫標、形影分離、老家留坑

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style  
type="text/css">
 7         
 8         *{
 9             padding: 0;
10             margin: 0;
11         }
12         div{
13             width: 200px;
14             height: 200px;
15 
16         }
17         .box1{
18             background-color: red;
19         }
20         .box2{
21             background-color 
: green;
22             position: relative;
23             /*top: 50px;*/
24             left: 300px;
25         }
26         .box3{
27             background-color: blue;
28         }
29 
30 
31     </style>
32 </head>
33 <body>
34 
35     <!-- 相對定位三大特性： 1.不脫標  2.形影分離  3.老家留坑 
36         所以說 相對定位 在頁面中沒有什麼太大的作用。影響我們頁面的佈局。但是我們不要使用相對定位來做壓蓋效果 
-->
37 
38     <div class="box1"></div>
39     <div class="box2"></div>
40     <div class="box3"></div>
41 
42     
43 </body>
44 </html>

相對定位的特性

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>超連結美化</title>
  6     <style type="text/css">
  7         /*清除預設樣式*/
  8         *{
  9             padding: 0;
 10             margin: 0;
 11         }
 12         ul{
 13             list-style: none;
 14         }
 15         .nav{
 16             width: 960px;
 17             /*height: 40px;*/
 18             overflow: hidden;
 19             margin: 100px auto ;
 20             background-color: purple;
 21             /*設定圓角*/
 22             border-radius: 10px;
 23         }
 24         .nav ul li{
 25             float: left;
 26             width: 160px;
 27             height: 40px;
 28             line-height: 40px;
 29             text-align: center;
 30         }
 31         .nav ul li.xiaoming{
 32             position: relative;
 33             top: 40px;
 34             left: 30px;
 35         }
 36         .nav ul li a{
 37             display: block;
 38             width: 160px;
 39             height: 40px;
 40             color: white;
 41             font-size: 20px;
 42             text-decoration: none;
 43             font-family: 'Hanzipen SC';
 44         }
 45         /*a標籤除外，不繼承父元素的color*/
 46 
 47 
 48         .nav ul li a:hover{
 49             background-color: red;
 50             font-size: 22px;
 51         }
 52     </style>
 53 </head>
 54 <body>
 55     
 56     <div class="nav">
 57         <ul>
 58             <li>
 59                 <a href="">網站導航1</a>
 60             </li>
 61             <li class="xiaoming">
 62                 <a href="">網站導航2</a>
 63             </li>
 64             <li>
 65                 <a href="">網站導航3</a>
 66             </li>
 67             <li>
 68                 <a href="">網站導航4</a>
 69             </li>
 70             <li>
 71                 <a href="">網站導航5</a>
 72             </li>
 73             <li>
 74                 <a href="">網站導航6</a>
 75             </li>
 76         </ul>
 77     </div>
 78 </body>
 79 </html>
 80 
 81 
 82 
 83 <!-- 因為相對定位有坑，佔著茅房不拉屎，所以我們一般不要使用相對定位來做壓蓋效果。它在頁面中，效果作用極小，就兩個作用：
 84 1.微調元素位置
 85 2.做絕對定位的參考（父相子絕） 講絕對定位會講
 86 
 87  -->
 88 
 89 
 90 
 91 <!DOCTYPE html>
 92 <html lang="en">
 93 <head>
 94     <meta charset="UTF-8">
 95     <title>Document</title>
 96     <style type="text/css">
 97         *{
 98             padding: 0;
 99             margin: 0;
100         }
101         div{
102             margin: 100px;
103         }
104         .user{
105             font-size: 25px; 
106         }
107         .btn{
108             position: relative;
109             top: 3px;
110             left: -5px;
111         }
112 
113     </style>
114 </head>
115 <body>
116     <!-- 微調我們元素位置-->
117 
118     <div>
119         
120         <input type="text" name="username"   class="user">
121         <input type="button" name="" value="點我" class="btn">
122     </div>
123     
124 </body>
125 </html>

相對定位的用途

2.2、絕對定位　　特性：脫標、做遮蓋效果，提升了層級、設定絕對定位之後，不區分行內元素和塊級元素，都能設定寬高

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         
 8         *{
 9             padding: 0;
10             margin: 0;
11         }
12         div{
13             width: 200px;
14             height: 200px;
15         }
16         .box1{
17             background-color: red;
18 
19             /*絕對的定位： 1.脫標 2.做遮蓋效果，提升層級 3.設定絕對定位之後，不區分行內元素和塊級元素，都能設定寬高。*/
20             position: absolute;
21         }
22         .box2{
23             background-color: green;
24             
25         }
26         .box3{
27             background-color: blue;
28         }
29         span{
30             width: 100px;
31             height: 100px;
32             background-color: pink;
33             position: absolute;
34         }
35 
36 
37     </style>
38 </head>
39 <body>
40 
41     
42 
43     <div class="box1"></div>
44     <div class="box2"></div>
45     <div class="box3"></div>
46     <span>文字</span>
47     
48 </body>
49 </html>

絕對定位的特性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         body{
 8             width: 100%;
 9             height: 2000px;
10             border: 10px solid green;
11         }
12         
13         .box{
14             width: 200px;
15             height: 200px;
16             background-color: red;
17             /*絕對定位參考點： 
18             1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）為參考點來調整位置
19             2.當我使用bottom屬性描述的時候。是以首屏頁面左下角為參考點來調整位置。
20             */
21             position: absolute;
22             top: 100px;
23             /*bottom: 100px;*/
24             left: 18px;
25         }
26     </style>
27 </head>
28 <body>
29     <div class="box">
30         
31     </div>
32 
33 
34     
35 </body>
36 </html>

絕對定位參考點

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .box{
12             width: 300px;
13             height: 300px;
14             border: 5px solid red;
15             margin: 100px;
16             /*父盒子設定相對定位*/
17             position: relative;
18             padding: 50px;
19         }
20         .box2{
21             width: 300px;
22             height: 300px;
23             background-color: green;
24             position: relative;
25             
26         }
27 
28         .box p{
29             width: 100px;
30             height: 100px;
31             background-color: pink;
32             /*子元素設定了絕對定位*/
33             position: absolute;
34             top: 0;
35             left: 0;
36         }
37 
38         /*父輩元素設定相對定位，子元素設定絕對定位，那麼會以父輩元素左上角為參考點
39         這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。 如果父親設定了定位，那麼以父親為參考點。那麼如果父親沒有設定定位，那麼以父輩元素設定定位的為參考點
40         */
41 
42     </style>
43 </head>
44 <body>
45     <div class="box">
46 
47         <div class="box2">
48             <p></p>
49         </div>
50     </div>
51     
52 </body>
53 </html>

絕對定位以盒子作為參考點

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .box{
12             width: 300px;
13             height: 300px;
14             border: 5px solid red;
15             margin: 100px;
16             /*父盒子設定相對定位*/
17             position: absolute;
18             padding: 50px;
19         }
20         
21 
22         .box p{
23             width: 100px;
24             height: 100px;
25             background-color: pink;
26             /*子元素設定了絕對定位*/
27             position: absolute;
28             top: 10px;
29             left: 20px;
30         }
31 
32 
33     </style>
34 </head>
35 <body>
36 
37     <!-- 不僅僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素為參考點 。
38 
39         注意了：父絕子絕，沒有實戰意義，做站的時候不會出現父絕子絕。因為絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在我們頁面佈局中，是常用的佈局方案。因為父親設定相對定位，不脫離標準流，子元素設定絕對定位，僅僅的是在當前父輩元素內調整位置資訊。
40 
41     -->
42     <div class="box">
43 
44             <p></p>
45 
46     </div>
47     
48 </body>
49 </html>

絕對定位以父輩盒子做參考點2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .father{
12             width: 300px;
13             height: 300px;
14             margin: 100px;
15             border: 10px solid red;
16             position: relative;
17             padding: 50px;
18         }
19         .father p{
20             width: 100px;
21             height: 100px;
22             background-color: yellow;
23             position: absolute;
24             top: 10px;
25             left: 40px;
26         }
27     </style>
28 </head>
29 <body>
30     <div class="father">
31         <p></p>
32     </div>
33     
34 </body>
35 </html>

絕對定位的盒子無視父輩的padding

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .box{
12             width: 100%;
13             height: 69px;
14             background: #000;
15         }
16         .box .c{
17             width: 960px;
18             height: 69px;
19             background-color: pink;
20             /*margin: 0 auto;*/
21             position: relative;
22             left: 50%;
23             margin-left: -480px;
24 
25             /*設定絕對定位之後，margin:0 auto;不起任何作用，如果想讓絕對定位的盒子居中。當做公式記下來 設定子元素絕對定位，然後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/
26         }
27 
28 
29     </style>
30 </head>
31 <body>
32     <div class="box">
33         <div class="c"></div>
34     </div>
35     
36 </body>
37 </html>

絕對定位盒子居中

2.3、固定定位　　特性：脫標、遮蓋，提成層級、固定位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         
 8         *{
 9             padding: 0;
10             margin: 0;
11         }
12         p{
13             width: 100px;
14             height: 100px;
15             background-color: red;
16             /*固定定位：固定當前的元素不會隨著頁面滾動而滾動，
17             特性：1.脫標 2.提升層級 3.固定不變 不會隨頁面滾動而滾動
18                 
19             參考點：設定固定定位，用top描述。那麼是以瀏覽器的左上角為參考點
20             如果用bottom描述，那麼是以瀏覽器的左下角為參考點
21 
22             作用： 1.返回頂部欄 2.固定導航欄 3.小廣告
23 
24             */
25             position: fixed;
26             bottom: 30px;
27             right: 40px;
28         }
29     </style>
30 </head>
31 <body>
32     
33     <div>
34         <p></p>
35         <img src="./bojie.jpg" alt="">
36         <img src="./bojie.jpg" alt="">
37         <img src="./bojie.jpg" alt="">
38         <img src="./bojie.jpg" alt="">
39         <img src="./bojie.jpg" alt="">
40         <img src="./bojie.jpg" alt="">
41 
42     </div>
43 </body>
44 </html>

固定定位特性和應用場景

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>固定導航欄</title>
  6     <style type="text/css">
  7         *{
  8             padding: 0;
  9             margin: 0;
 10         }
 11         ul{
 12             list-style: none;
 13         }
 14         a{
 15             text-decoration: none;
 16         }
 17         body{
 18             /*給body設定導航欄的高度，來顯示下方圖片的整個內容*/
 19             padding-top: 49px;
 20         }
 21         .wrap{
 22             width: 100%;
 23             height: 49px;
 24             background-color: #000;
 25             /*設定固定定位之後，一定一定要加top屬性和left屬性*/
 26             position: fixed;
 27             top: 0;
 28             left: 0;
 29 
 30             
 31         }
 32         .wrap .nav{
 33             width: 960px;
 34             height: 49px;
 35             margin: 0 auto;
 36 
 37         }
 38         .wrap .nav ul li{
 39             float: left;
 40             width: 160px;
 41             height: 49px;
 42             
 43             text-align: center;
 44         }
 45         .wrap .nav ul li a{
 46             width: 160px;
 47             height: 49px;    
 48             display: block;
 49             color: #fff;
 50             font: 20px/49px "Hanzipen SC";
 51             background-color: purple;
 52         }
 53         .wrap .nav ul li a:hover{
 54             background-color: red;
 55             font-size: 22px;
 56         }
 57 
 58 
 59 
 60     </style>
 61 </head>
 62 <body>
 63     <div class="wrap">
 64         <div class="nav">
 65             <ul>
 66                 <li>
 67                     <a href="#">網頁開發</a>
 68                 </li>
 69                 <li>
 70                     <a href="#">網頁開發</a>
 71                 </li>
 72                 <li>
 73                     <a href="#">網頁開發</a>
 74                 </li>
 75                 <li>
 76                     <a href="#">網頁開發</a>
 77                 </li>
 78                 <li>
 79                     <a href="#">網頁開發</a>
 80                 </li>
 81                 <li>
 82                     <a href="#">網頁開發</a>
 83                 </li>
 84             </ul>
 85         </div>
 86     </div>
 87     <img src="./bojie.jpg" alt="">
 88     <img src="./bojie.jpg" alt="">
 89     <img src="./bojie.jpg" alt="">
 90     <img src="./bojie.jpg" alt="">
 91     <img src="./bojie.jpg" alt="">
 92     <img src="./bojie.jpg" alt="">
 93     <img src="./bojie.jpg" alt="">
 94     <img src="./bojie.jpg" alt="">
 95     <img src="./bojie.jpg" alt="">
 96     <img src="./bojie.jpg" alt="">
 97     <img src="./bojie.jpg" alt="">
 98     <img src="./bojie.jpg" alt="">
 99 
100     
101 </body>
102 </html>

固定定位_固定導航欄

三、父相子絕

當父盒子設定為相對定位，子盒子絕對定位的參考點是父盒子的左上角。如果父盒子設定為絕對定位或者固定定位，子盒子同樣是以父盒子的左上角做參考點，但是那樣，父盒子就脫離標準流，沒什麼意義。所以一般情況下，都是要遵從“父相子絕”的原則。附一個父相子絕的案例，如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .box{
12             width: 300px;
13             height: 300px;
14             border: 5px solid red;
15             margin: 100px;
16             /*父盒子設定相對定位*/
17             position: relative;
18             padding: 50px;
19         }
20         .box2{
21             width: 300px;
22             height: 300px;
23             background-color: green;
24             position: relative;
25             
26         }
27 
28         .box p{
29             width: 100px;
30             height: 100px;
31             background-color: pink;
32             /*子元素設定了絕對定位*/
33             position: absolute;
34             top: 0;
35             left: 0;
36         }
37 
38         /*父輩元素設定相對定位，子元素設定絕對定位，那麼會以父輩元素左上角為參考點
39         這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。 如果父親設定了定位，那麼以父親為參考點。那麼如果父親沒有設定定位，那麼以父輩元素設定定位的為參考點
40         */
41 
42     </style>
43 </head>
44 <body>
45     <div class="box">
46 
47         <div class="box2">
48             <p></p>
49         </div>
50     </div>
51     
52 </body>
53 </html>

CSS定位中“父相子絕”

一、定位的介紹　　定位有三種：相對定位(position:relative)、絕對定位(position:absolute)、固定定位(position:fixed) 二、三種定位的用法，特點和例項 2.1、相對定位　　特性：不脫標、形影分離、老家留坑 1 <!DOCT

Vue中父傳子、子傳父元件之間傳值

在Vue的框架開發的專案過程中，經常會用到元件來管理不同的功能，有一些公共的元件會被提取出來。這時必然會產生一些疑問和需求？比如一個元件呼叫另一個元件作為自己的子元件，那麼我們如何進行給子元件進行傳值呢。常見的就是父子元件，子父元件之間的傳值。父子元件的關係可以總結為 pro

Java中父類子類一點心得

關於java中子類父類之間的關係一點心得：宣告一個父類引用（變數），可以賦值一個父類物件。宣告一個子類引用，可以賦值一個子類物件。宣告一個父類引用（變數），可以賦值一個子類物件。宣告一個子類引用，不可以賦值一個父類物件。例如： Dog ext

vue中父傳子(props)的用法

方式一：靜態 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Java中父類子類初始化順序

1) 首先初始化父類中的靜態成員變數和靜態程式碼塊，按照在程式中出現的順序初始化 2) 然後初始化子類中的靜態成員變數和靜態程式碼塊，按照在程式中出現的順序初始化 3) 其次初始化父類的普通成員變數和程式碼塊，再執行父類的構造方法 4) 最後初始化子類的普通成員

java中父類子類的成員變數和成員方法在記憶體分配上的一些理解

先宣告，以下是個人自己的理解(我也怕誤人子弟)，如有錯誤請指出一起學習交流。先上程式碼：package myTest; class A { int num = 5; A() { show(); } public void show() { System.

iframe中父與子頁面訪問許可權問題

一、同域方法呼叫父頁面呼叫子頁面方法：FrameName.window.childMethod(); 子頁面呼叫父頁面方法：parent.window.parentMethod(); DOM元素訪

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

需求 style 主頁計算機美化情況下 mar head div 關於CSS中的定位使用子絕父相（子類絕對位置和父類相對位置）前言：最近在學習JavaWeb前端的CSS，關於CSS中的定位有時候可能會使用到子絕父相，由於本人的水平有限如果有什麽地方說錯了，請指出

395day(定位複習，子絕父相)

《2018年11月3日》【連續395天】標題：定位複習，子絕父相；內容： /*postion: static/ absolute/ 不佔位置移當前屏為基準 relative(以自己的左上角點為基點移動)/ 原本的佔位置 fixed*/ /*當父沒有定位，以最近

css負邊距之詳解(子絕父相)

來源 | http://segmentfault.com 原文 | The Definitive Guide to Using Negative Margins 自從1998年CSS2作為推薦以來，表格的使用漸漸退去，成為歷史。正因為此，從那以後CSS佈局成為了優雅程

關於css中父元素與子元素之間margin-top的問題

可用技術分享一個 src 文檔流重疊 cond one left 之前在使用經常遇到下面的問題： html： 1 <div class="top"> 2 <div class="one">I‘m the first!</div&

CSS中父div與子div——子div有內容，父div高度卻為0

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

CSS中子絕父相佈局

如果我們要將hot圖片放到下圖的位置，我們該怎麼實現？首先我們來進行佈局，用一個div包括一個a標籤和img標籤，並給a標籤設定樣式，如下程式碼： <!DOCTYPE html>

CSS中父div與子div——子div有內容，父div高度卻為0？

我們可能在審查網頁元素時，會發現這樣的一種情況：案例 HTMLAndCSS.html <!DOCTYPE html> <html lang="en"

vue組件之間的通信以及如何在父組件中調用子組件的方法和屬性

拷貝 htm ps實現 lis html 區分大小寫個數但是 targe 在Vue中組件實例之間的作用域是孤立的，以為不能直接在子組件上引用父組件的數據，同時父組件也不能直接使用子組件的數據一、父組件利用props往子組件傳輸數據父組件： <div>

zTree中父節點禁用，子節點可以用

success parent node trees itl obj ack microsoft arr 參考學習網址：http://www.treejs.cn/v3/main.php#_zTreeInfo zTree中父節點禁用，子節點可以用 axios.get(‘/ba

C#中父窗口和子窗口之間控件互操作實例

child title 成員 img dddddd idt 函數通過 plugin 本文實例講述了C#中父窗口和子窗口之間控件互操作的方法。分享給大家供大家參考。具體分析如下：很多人都苦惱於如何在子窗體中操作主窗體上的控件，或者在主窗體中操作子窗體上的控件。相比較而言

react中父級props改變，更新子級state的多種方法

new 渲染改變推薦！！ item data class else clas 子組件： class Children extends Component { constructor(props) { super(props); thi

父組件中調用子組件的方法和屬性

原生利用 color -c 取代 tro () script TE 　　方案：利用ref屬性可以獲取到dom元素或者是子組件，從而可以調用子組件的方法（註意2.0版本用ref取代了el） 1、當ref直接定義在dom元素上時，則通過this.$refs.name可以獲取到

vue組件中的樣式屬性：scoped，解決在父組件中無法修改子組件樣式問題

別名處理 -h TP red example 通過圖片 bsp 　　Scoped CSS規範是Web組件產生不汙染其他組件，也不被其他組件汙染的CSS規範。　　vue組件中的style標簽標有scoped屬性時表明style裏的css樣式只適用於當前組件元素，它是通過

CSS定位中“父相子絕”

相關推薦