CSS定位中“父相子绝”

Wesley13
• 阅读 1136

一、定位的介绍

　　定位有三种：相对定位(position:relative)、绝对定位(position:absolute)、固定定位(position:fixed)

二、三种定位的用法，特点和实例

2.1、相对定位　　特性：不脱标、形影分离、老家留坑

CSS定位中“父相子绝” CSS定位中“父相子绝” 

 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>

相对定位的特性

CSS定位中“父相子绝” CSS定位中“父相子绝” 

  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、绝对定位　　特性：脱标、做遮盖效果，提升了层级、设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高

CSS定位中“父相子绝” CSS定位中“父相子绝” 

 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>

绝对定位的特性

CSS定位中“父相子绝” CSS定位中“父相子绝” 

 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>

绝对定位参考点

CSS定位中“父相子绝” CSS定位中“父相子绝” 

 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定位中“父相子绝” CSS定位中“父相子绝” 

 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

CSS定位中“父相子绝” CSS定位中“父相子绝” 

 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

CSS定位中“父相子绝” CSS定位中“父相子绝” 

 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、固定定位　　特性：脱标、遮盖，提成层级、固定位置

CSS定位中“父相子绝” CSS定位中“父相子绝” 

 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>

固定定位特性和应用场景

CSS定位中“父相子绝” CSS定位中“父相子绝” 

  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>
绝对定位alt标签backgroundpositionpaddingcssmargincss样式JavaJava
点赞
收藏
评论区
推荐文章
blmius blmius
•
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
4246
0
0
helloworld_34035044 helloworld_34035044
•
2年前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为
1210
0
0
待兔 待兔
•
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
1137
0
0
Jacquelyn38 Jacquelyn38
•
3年前
2020年前端实用代码段，为你的工作保驾护航
有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
2446
0
0
Stella981 Stella981
•
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法，以百度首页为例子。0.元素定位方法主要有：id定位：find\_element\_by\_id('')name定位：find\_element\_by\_name('')class定位：find\_element\_by\_class\_name(''
975
0
0
Wesley13 Wesley13
•
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败，请联系管理员！');中国在东8区所以加8方法二：selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
1382
0
0
Wesley13 Wesley13
•
3年前
00：Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork)，斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟，已经成为Web应用程序的首选开发语言。Java是简单易学，完全面向对象，安全可靠，与平台无关的编程语言。
1313
0
0
Stella981 Stella981
•
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。⑵下面是常用的属性以及描述：!(https://oscimg.oschina.net/oscnet/00cb565
763
0
0
Wesley13 Wesley13
•
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
1586
0
0
Python进阶者 Python进阶者
•
11个月前
Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除
大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这
559
0
0
Wesley13
Wesley13
Lv1
最大的安心是自律温柔和爱自己。
文章
1.2w
粉丝
22
获赞
1.7k
热门文章
JavPlayer：AI破坏马赛克，大量马赛克破坏版影片流出
2020年最新可用的磁力搜索引擎&种子搜索网站，持续整理分享
8个在线接收手机短信验证码的免费网络服务整理
IDM 激活破解工具
java.net.ConnectException：Connection timed out：connect 出现连接超时的问题？