12-1 定位(相对，绝对，固定)

一相对定位

如果仅仅对当前盒子设置相对定位，那么它与原来的盒子没有任何变化、

只有一个作用：父相子绝不要使用相对定位来做压盖现象

二种现象：1.不脱标2.形影分离实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>相对定位</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10         }
11         .box1{
12             background-color: red;
13         }
14         .box2{
15             background-color: black;
16             position: relative;
17             top: 200px;
18             left: 0px;
19         }
20         .box3{
21             background-color: yellow;
22         }
23     </style>
24 </head>
25 <body>
26 <div class="box1"></div>
27 <div class="box2"></div>
28 <div class="box3"></div>
29 </body>
30 </html>

View Code

二绝对定位

现象：   1.设置绝对定位的盒子，脱离标准流参考点：

   一、单独一个绝对定位的盒子

   1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置   2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。（爱立信）

   二、以父辈盒子作为参考点   1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。

   2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点

   3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点

   注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，   影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，   不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

   还要注意，绝对定位的盒子无视父辈的padding设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>绝对定位</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .father{
12             width: 500px;
13             height: 500px;
14             background-color: green;
15             position: relative;
16             /*向下走50px*/
17             top: 50px;
18             /*向右走100px*/
19             left: 100px;
20
21         }
22         .father2{
23             width: 300px;
24             height: 300px;
25             background-color: yellow;
26             position: relative;
27             padding: 30px;
28             margin-left: 30px;
29             /*top: 10px;*/
30             /*left: 10px;*/
31         }
32         .box1{
33
34
35             width: 200px;
36             height: 200px;
37             background-color: red;
38             position: absolute;
39             top: 10px;
40             left: 10px;
41         }
42
43     </style>
44 </head>
45 <body style="height: 2000px">
46 <div class="father">
47         <div class="father2">
48             <div class="box1">
49
50             </div>
51         </div>
52 </div>
53
54
55 </body>
56 </html>

View Code

三固定定位

固定当前的元素不会随着页面滚动而滚动

特性:

1.脱标 2.遮盖，提升层级 3.固定不变

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

实例：做了一个固定导航栏

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>固定定位</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10
11         }
12         body{
13             padding-top: 80px;
14         }
15         .head{
16             width: 100%;
17             height: 80px;
18             background-color: rgba(0,0,0,.5);
19             position:fixed;
20             top: 0;
21             left: 0;
22             z-index: 999;
23         }
24         .head p{
25              margin-left: 600px;
26         }
27         .wrapper{
28             width:100%;
29             height: 500px;
30             background-color: red;
31         }
32         .top{
33             width: 100px;
34             height: 100px;
35             background-color: black;
36             position: fixed;
37             bottom: 20px;
38             right: 20px;
39             line-height: 100px;
40             text-align: center;
41         }
42         body{
43             height: 2000px;
44         }
45
46     </style>
47 </head>
48 <body>
49     <div class="head">
50         <p>导航栏</p>
51     </div>
52     <div class="wrapper">
53         中心内容
54         <p style="position: absolute; color: black;background-color: white;"></p>
55     </div>
56     <a href="#">
57         <div class="top">
58             返回顶部
59         </div>
60     </a>
61     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8">
62
63     </script>
64
65     <script type="text/javascript">
66         $('.top').click(function(){
67             $('html,body').animate({
68                 scrollTop: '0'
69             },2000);
70
71             });
72
73
74
75
76
77     </script>
78 </body>
79 </html>

View Code

四父相子绝案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>父相子绝案例</title>
 6     <style>
 7         *{
 8             padding:0;
 9             margin: 0;
10         }
11         input,button{
12             outline: none;
13             border: 0;
14         }
15         .search{
16             width: 296px;
17             height: 48px;
18             margin-left: 1000px;
19             margin-top: 81px;
20         }
21         .search form{
22             position: relative;
23         }
24         .search input[type='text']{
25             width: 223px;
26             height: 48px;
27             font-size: 14px;
28             border: 1px solid #e0e0e0;
29             padding: 0 5px;
30             position: absolute;
31         }
32         .search span{
33             font-size: 12px;
34             background: #EEEEEE;
35             padding: 0 5px;
36             position: absolute;
37             top:0;
38             right: 0;
39         }
40         .search span.t{
41             top: 20px;
42             right: 162px;
43             z-index: 2;
44
45         }
46         .search span.s{
47             top: 20px;
48             right: 83px;
49             z-index: auto;
50         }
51         .search input[type='submit']{
52             height: 50px;
53             width: 50px;
54             border: 1px solid #e0e0e0;
55             background: #fff;
56             position: absolute;
57             right: 12px;
58             top: 0px;
59         }
60     </style>
61 </head>
62 <body>
63 <div class="search">
64     <form>
65         <input type="text" name=""><input type="submit" value="按钮">
66         <span class="t">小米8</span>
67         <span class="s">小米MIX 2s</span>
68
69     </form>
70 </div>
71
72 </body>
73 </html>

View Code

五 z-index

<!--1.z-index 值表示谁压着谁，数值大的压盖住数值小的，--><!--2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，--><!--而浮动元素不能使用z-index--><!--3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，--><!--那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。-->实例：z-index优先级判断

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>z-index优先级</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin:0;
10         }
11         .box{
12             width: 500px;
13             height: 500px;
14             background-color: red;
15
16             position: absolute;
17             left: 50%;
18             margin-left: -250px;
19             z-index: 20;
20         }
21         .box1{
22                 width: 300px;
23             height: 300px;
24             background-color: green;
25             position: absolute;
26             left: 50%;
27             margin-left: -150px;
28             z-index: 100;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="box"></div>
34     <div class="box1"></div>
35
36 </body>
37 </html>

View Code

实例2 从父现象

<!--从父现象：父亲怂了，儿子再牛逼也没用,儿子的z-index会优先继承父类的z-index-->

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>z-index从父现象</title>
 6     <style>
 7         .father1{
 8             position: relative;
 9             z-index: 20;
10         }
11         .father2{
12             position: relative;
13             z-index: 3;
14         }
15         .box{
16             width: 500px;
17             height: 500px;
18             background-color: red;
19
20             position: absolute;
21             left: 50%;
22             margin-left: -250px;
23             z-index: 20;
24         }
25         .box2{
26             width: 300px;
27             height: 300px;
28             background-color: green;
29             position: absolute;
30             left: 50%;
31             margin-left: -150px;
32             z-index: 1000000;
33         }
34     </style>
35 </head>
36 <body>
37     <div class="father1">
38         <div class="box">
39
40         </div>
41
42     </div>
43
44     <div class="father2">
45         <div class="box2">
46
47         </div>
48     </div>
49
50 </body>
51 </html>

View Code

转载于:https://www.cnblogs.com/huningfei/p/9294609.html

12-1 定位(相对，绝对，固定)相关推荐

position:sticky 粘性定位 (sticky) 与固定定位
position:sticky是css定位新增属性:可以说是static(没有定位) 和固定定位fixed 的结合:它主要用在对 scroll 事件的监听上:简单来说,在滑动过程中,某个元素距离其父 ...
CSS基础（12）- 定位
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录定位 position属性相对定位绝对定位固定定位定位下的居中多个定位元素重叠时 ...
定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...
html固定定位原理,css固定定位
定位的四种模式:static,relative,absolute,fixed 定位的四个位置:left,right,top,bottom 定位属性:position,有四种状态值 1.static:静 ...
html 固定定位怎么居中,固定定位下的div水平居中
justify-content: center; align-items: center;/*单行下的居中对齐*/ 或 justify-content: center; align-content: ...
No.11 position定位之 fixed固定定位
在css中,使用position(定位),它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素.甚至是浏览器窗口本身的位置. 本篇介绍: fixed(固定定位) fixed定 ...
微信小程序-元素的定位相对绝对固定
CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其 ...
codemirror 光标定位_CodeMirror 中固定滚动位置
CodeMirror 是最流行的代码编辑器之一,包括写作软件 WonderPen 在内的很多工具都使用它开发. 与印象笔记等笔记软件不同,WonderPen 的定位是一款写作软件.写作软件与笔记软件之 ...
北斗和GPS定位在室外非常好用，但当手机进入室内时，它们的定位功能就很不准，甚至无法定位。我们可以开启WLAN扫描定位WIFI模块固定编码或者开启手机的A-GPS辅助定位通过基站，A-GPS服务器定位
手机定位已经成为人们生产生活必不可少的工具,但有些人的手机定位又快又准,有些人的手机定位时常又慢又偏差大.那该如何解决呢?可以通过下面两个设置来提高定位速度和精度. 1.A-GPS辅助,提高室外定位速 ...
CSS相对定位,固定定位,绝对定位实例方法和实例
1CSS相对定位方法实例: 当容器的position属性值为relative时,这个容器即被相对定位了.相对定位和其他定位相似,也是独立出来浮在上面.不过相对定位的容器的top(顶部).bottom( ...

12-1 定位(相对，绝对，固定)

12-1 定位(相对，绝对，固定)相关推荐

最新文章

热门文章