一、css定位:position:
1.相对定位:relative
如果仅仅对当前盒子设置相对定位,那么它与原来的盒子没有任何变化
只有一个作用:父相子绝的参考 不要使用相对定位做压盖现象
参考点:以原来的位置为参考点
两种现象:1.不脱标 2.形影分离老家留坑(恶心)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css" media="screen"> 6 7 div{ 8 width: 200px; 9 height: 200px; 10 11 } 12 .box1{ 13 background-color: red; 14 } 15 .box2{ 16 background-color: green; 17 position: relative; 18 /*top: 200px;*/ 19 left: 0px; 20 } 21 .box3{ 22 background-color: blue; 23 } 24 25 </style> 26 </head> 27 <body> 28 29 <div class="box1"> 30 31 </div> 32 <div class="box2"> 33 34 </div> 35 <div class="box3"> 36 37 </div> 38 39 </body> 40 </html>
2.绝对定位: absolute 做压盖现象
现象:1.设置绝对定位的盒子,脱离标准流
参考点:
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角(一直在显示的左上角;跟浏览器的左上角区分)为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。(爱立信)
二、以父辈盒子作为参考点
1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。
2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点
注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。
绝对定位的盒子无视父亲的padding
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css" media="screen"> 6 *{ 7 padding: 0; 8 margin: 0; 9 } 10 11 .father{ 12 width: 500px; 13 height: 500px; 14 background-color: green; 15 position: relative; 16 top: 50px; 17 left: 100px; 18 19 } 20 .father2{ 21 width: 300px; 22 height: 300px; 23 background-color: yellow; 24 margin-left: 30px; 25 position: relative; 26 padding: 30px; 27 28 } 29 .box1{ 30 width: 200px; 31 height: 200px; 32 background-color: red; 33 position: absolute; 34 top: 30px; 35 left: 40px; 36 } 37 38 </style> 39 </head> 40 <body style="height: 2000px"> 41 42 <div class="father"> 43 <div class="father2"> 44 45 46 <div class="box1"> 47 48 </div> 49 </div> 50 51 </div> 52 53 </body> 54 </html>
设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中
父相子绝的案例03:左右调即可!!父相子绝常用!
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css" media="screen"> 6 *{ 7 padding: 0; 8 margin: 0; 9 } 10 input,button{ 11 outline: none; 12 border: 0; 13 } 14 .search{ 15 width: 296px; 16 height: 48px; 17 margin: 200px auto; 18 19 } 20 .search form{ 21 position: relative; 22 } 23 .search input[type='text']{ 24 width: 223px; 25 height: 48px; 26 font-size: 14px; 27 border: 1px solid #e0e0e0; 28 padding: 0 5px; 29 position: absolute; 30 } 31 .search span{ 32 font-size: 12px; 33 background-color: #eee; 34 padding: 0 5px; 35 position: absolute; 36 top: 0; 37 right: 0; 38 } 39 .search span.t{ 40 top: 20px; 41 right: 162px; 42 z-index: 2; 43 } 44 .search span.s{ 45 top: 20px; 46 right: 82px; 47 z-index: 1; 48 } 49 .search input[type='submit']{ 50 height: 48px; 51 width: 50px; 52 border: 1px solid #e0e0e0; 53 background: #fff; 54 position: absolute; 55 right: 12px; 56 top: 0px; 57 } 58 59 </style> 60 </head> 61 <body> 62 <div class="search"> 63 <form> 64 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 73 </body> 74 </html>
copy别人的代码:找到模板,1.查看源代码,复制到html中;2.在sources里复制粘贴(save as 或选择图片save)到自己的目录下即可!趴网站!ok
3.固定定位:fixed
现象:1,脱标
参考点:浏览器左上角(滚动时就看不见了)
例子08!要写top,left都设为0 给body设padding-top z-index设置大(下去再上来,上为了保证第二栏相对于导航栏固定,覆盖了没关系!)
导航栏,回到顶部,设置时间返回顶部
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="UTF-8"> 6 <style type="text/css" media="screen"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 body{ 12 padding-top: 80px; 13 } 14 .head{ 15 width: 100%; 16 height: 80px; 17 background-color: rgba(0,0,0,.5); 18 position: fixed; 19 top: 0; 20 left: 0; 21 z-index: 99999; 22 23 24 } 25 .wrapper{ 26 width: 100%; 27 height: 500px; 28 background-color: red; 29 30 } 31 .top{ 32 width: 100px; 33 height: 100px; 34 background-color: purple; 35 position: fixed; 36 bottom: 20px; 37 right: 20px; 38 line-height: 100px; 39 text-align: center; 40 } 41 42 </style> 43 </head> 44 <body style="height: 2000px;"> 45 46 <div class="head"> 47 导航栏 48 </div> 49 <div class="wrapper"> 50 中心内容 51 52 <p style="position: absolute; color: #fff;background-color: green;"> heiheihei</p> 53 </div> 54 55 <div class="top"> 56 返回顶部 57 </div> 58 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 59 60 <script type="text/javascript"> 61 62 $('.top').click(function(){ 63 $('html,body').animate({ 64 scrollTop:'10px' 65 },2000); 66 67 }); 68 69 </script> 70 71 </body> 72 </html>
2.z-index
1.z-index 值表示谁压着谁,数值大的压盖住数值小的,
2.只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
3.z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
4.从父现象:父亲怂了,儿子再牛逼也没用
居中:
标准流居中:margin: 0 auto; 注意设置高度
中心banner:center top让一个大的背景图居中显示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css" media="screen"> 6 .box{ 7 width: 100%; 8 height: 657px; 9 border: 1px solid red; 10 /*left center bottom 11 left center bottom 12 */ 13 background: url(./1.jpg) no-repeat center top; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="box"> 19 20 </div> 21 22 </body> 23 </html>
绝对定位的盒子居中:3行公式(设置绝对定位,left50%,向左移动宽度的一半)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css" media="screen"> 6 *{ 7 padding: 0; 8 margin: 0; 9 } 10 .father1{ 11 position: relative; 12 z-index: 5; 13 } 14 .father2{ 15 position: relative; 16 z-index: 7; 17 } 18 19 .box{ 20 width: 500px; 21 height: 500px; 22 background-color: red; 23 24 position: absolute; 25 left: 50%; 26 margin-left: -250px; 27 z-index: 20; 28 } 29 .box2{ 30 width: 300px; 31 height: 300px; 32 background-color: green; 33 position: absolute; 34 left: 50%; 35 margin-left: -150px; 36 z-index: 1000000; 37 } 38 /*z-index*/ 39 </style> 40 </head> 41 <body> 42 <!-- <div class="t" style="width: 1000px;height: 200px;background-color: yellow;"> --> 43 44 <!-- </div> --> 45 <div class="father1"> 46 <div class="box"> 47 48 </div> 49 50 </div> 51 52 <div class="father2"> 53 <div class="box2"> 54 55 </div> 56 </div> 57 58 59 60 </body> 61 </html>
注意:大模块并排用浮动,元素微调可以用定位 后写的绝对定位优先级大
z-index只能用在定位的元素里,定位的比未定位的优先极高;都设置定位的,谁的z-index大谁的优先极高
从父现象例子06!
小米案例购物车07 hover只能用在父代或子代选择器,不仅仅是a标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css" media="screen"> 6 .cart{ 7 width: 100px; 8 height: 50px; 9 background-color: #000; 10 position: relative; 11 margin: 100px auto; 12 cursor: pointer; 13 } 14 .cart-info{ 15 position: absolute; 16 width: 300px; 17 height: 100px; 18 background-color: red; 19 top: 50px; 20 left: -200px; 21 display: none; 22 } 23 .cart:hover .cart-info{ 24 display: block; 25 background-color: green; 26 } 27 </style> 28 </head> 29 <body> 30 31 <div class="cart"> 32 <span class="cart-info"></span> 33 </div> 34 35 </body> 36 </html>
二、css重要知识点总结:
block:换行 inline-block:不换行
1.每个标签 span==> 1.display属性 none|inline|inline-block|block 2.浮动 3.绝对定位
2.浮动原理:为了实现并排
清除浮动三种方式:
1.给父盒子设置固定高度
2.给父元素设置类clearfix,伪元素清除法
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both
}
3.overflow:hidden(可能会有问题)
3.定位:
相对定位:不脱标 position:relative;
作用:1.父相子绝的参考 2.微调元素(例如小米导航栏购物车)
参考点:以原来的自身的位置为参考点进行定位
绝对定位:脱标 position: absolute
作用:1.父相子绝,页面排版布局2.压盖现象
参考点:1个盒子:以页面左上角
父子盒子:以父辈元素左上角为参考点
固定定位:position: fixed;
1.脱标 2.固定导航栏 3.小广告
body{
padding-top: 80px;
}
.head{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
4. z-index的用法