020 定位

時間 2019-12-05

標籤定位欄目系統網絡简体版

原文原文鏈接

一：定位html

1.說明瀏覽器

　　元素的定位屬性主要包括定位模式和邊偏移兩部分。url

2.邊偏移spa

　　屬性：3d

　　top code

　　bottomhtm

　　leftblog

　　rightit

3.定位模式io

　　選擇器 {position: 屬性值}

　　經常使用值：

　　static 自動定位，靜態定位，默認的定位方式

　　relative

　　absolute

　　fixed 固定定位

4.static用處

　　做用是取消定位

　　若是不想用定位的時候，就須要使用這個值

二：relative模式

1.relative

　　相對。

　　以當前的左上角爲位置進行移動。

　　案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 100px;
 9             height: 100px;
10             background-color: blue;
11             position: relative;
12             top: 100px;
13             left: 100px;
14 
15         }
16     </style>
17 </head>
18 <body>
19     <div></div>
20 </body>
21 </html>

　　效果：

2.relative的特性

　　盒子在移動以後，本來的位置仍是存在的，繼續佔有。

　　案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 200px;
10             background-color: blue;
11         }
12         .first {
13             position: relative;
14             top: 100px;
15             left: 100px;
16         }
17         .second {
18             background-color: green;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="first"></div>
24     <div class="second"></div>
25 </body>
26 </html>

　　效果：

三：絕對定位absoute

1.說明

　　是不佔位置的。

　　以瀏覽器當前屏幕爲準進行對齊【直接寫兩個div，而後第二個div中加一個】

2.父元素沒有定位

　　沒有父親，與和父親元素沒有定位，absolute都是同樣的，以屏幕爲準進行對齊

　　案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 200px;
10             background-color: blue;
11         }
12         .first {
13             margin: 100px;
14         }
15         .second {
16             background-color: red;
17             position: absolute;
18             top: 50px;
19             left: 50px;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="first">
25         <div class="second"></div>
26     </div>
27 </body>
28 </html>

　　效果：

3.父親有定位

　　將元素依據最近的已經定位的父元素進行定位

四：子絕父相

1.說明

　　比較合適的搭配

　　父級元素是相對位置，子級元素爲絕對位置

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 1024px;
 9             height: 640px;
10             background-color: #eee;
11             margin: 100px auto;
12             padding: 10px;
13             position: relative;
14         }
15         .tejia {
16             position: absolute;
17             top: 0;
18             left: 354px;
19         }
20         
21     </style>
22 </head>
23 <body>
24     <div>
25         <img src="timg.jpg" alt="">
26         <img src="936.png" alt="" class="tejia">
27     </div>
28 </body>
29 </html>

3.效果

四：盒子居中

1.失效

　　盒子的magin:0 auto；在加了浮動或者定位以後，盒子就再也不居中了。

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 300px;
 9             height: 200px;
10             position: absolute;
11             left: 50%;
12             background-color: blue;
13             margin-left: -150px;
14         }
15     </style>
16 </head>
17 <body>
18     <div></div>
19 </body>
20 </html>

3.效果

4.使用場景

　　作一個這種的效果

5.實踐

　　案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         * {
 8             padding: 0;
 9             margin: 0;
10         }
11         .tb {
12             width: 750px;
13             height: 291px;
14             position: relative;
15             background-color: blue;
16             margin: 50px auto;
17         }
18         .tb a {
19             width: 40px;
20             height: 50px;
21             display: block;
22             position: absolute;
23             top: 50%;
24             margin-top: -25px;
25         }
26         .left {
27             left: 0;
28             background: url(left.png) no-repeat;
29         }
30         .right {
31             right: 0;
32             background: url(right.png) no-repeat;
33         }
34         .tb ul{
35             width: 76px;
36             height: 30px;
37             background-color: rgba(255,255,255,0.6);
38             position: absolute;
39             bottom: 10px;
40             left: 50%;
41             margin-left: -40px;
42             border-radius: 5px;
43         }
44         li {
45             list-style: none;
46             display: inline-block;
47             width: 20px;
48             height: 20px;
49             border-radius:20px;
50             background: pink;
51             text-align: center;
52             margin:5px 1px;
53         }
54     </style>
55 </head>
56 <body>
57     <div class="tb">
58         <img src="b.jpg" alt="">
59         <a href="#" class="left"></a>
60         <a href="#" class="right"></a>
61         <ul>
62             <li>1</li>
63             <li>2</li>
64             <li>3</li>
65         </ul>
66     </div>
67 </body>
68 </html>

　　效果：

五：fix固定定位

1.使用場景

　　脫標的

　　只認瀏覽器，和父級元素有麼有定位都不要緊

2.默認轉換

　　存在默認的轉換，將塊元素變爲行內元素，因此，能夠將其加一個寬。由於，行內元素是沒有寬的。

　　這裏和絕對定位是同樣的，都存在默認轉換

　　可是，若是想通欄怎麼辦？

　　可使用100%。

　　可是這個時候，須要添加left:0; top:0，才能去掉內邊距的問題。

六：疊放次序

1.說明

　　通常是後來者居上

　　z-index：默認是0

　　最大，則約往上

　　只有定位的盒子纔有這個屬性

　　不加單位，font-weight也不加單位

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 300px;
 9             height: 200px;
10             background-color: red;
11             position: absolute;
12         }
13         .blue {
14             background-color: blue;
15             top: 50px;
16             left: 50px;
17             z-index: 1;
18         }
19         .yellow {
20             background-color: yellow;
21             top: 100px;
22             left: 100px;
23         }
24 
27     </style>
28 </head>
29 <body>
30     <div class="red"></div>
31     <div class="blue"></div>
32     <div class="yellow"></div>
33 </body>
34 </html>

　　效果：

七：一個小案例

1.說明

　　兩個div放在一塊兒，邊框不變寬

　　而後，在變亮的時候，被壓住的邊框能夠變亮

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 300px;
10             border: 1px solid #ccc;
11             float: left;
12             margin-left: -1px; /*將邊框疊加起來，看起來只有一個邊框*/
13         }
14         div:hover {
15             border: 1px solid #f40;
16             position: relative; /*脫標，因此浮在上面*/
17         }
18     </style>
19 </head>
20 <body>
21     <div></div>
22     <div></div>
23     <div></div>
24     <div></div>
25 </body>
26 </html>

3.效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。