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.效果