position定位，CSS入门必备, 好像以后有个更厉害的flex！

Posted 2021-03-07 isremya

定位

可通过position属性还设置元素的定位。

　　?可选值：static 默认值 没开启

? 　　　　　　relative 开启相对定位

?　　　　　　 absolute 开启绝对定位

? 　　　　　　fixed 开启固定定位（绝对定位的一种）

　　开启定位后可通过left、right、top、bottom四个属性来设置元素偏移量。

　　left：元素相对于其定位位置的左侧偏移量。（距离左边多少 ——— 向右移）

　　通常只需选择其中两个就可对元素进行定位。（水平垂直方向各一个）

 

relative

　　1、相对定位指相对于元素在文档流中原来的位置进行定位。

　　2、开启相对定位的元素不会脱离文档流。故相对定位不会改变元素性质，

　　　  即块还是块，内联还是内联。

　　3、相对定位会使元素提升一个层级。（定位元素可以盖住文档流元素）

　　4、开启相对定位而不设置偏移量时元素不会发生任何变化。

　　.box1{

? 　　　　position:relative;

? 　　　　left:100px;

　　}

absolution

　　1、绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的。

? 　　　　若所有的祖先元素都没有开启定位，则相对于浏览器的窗口。

　　　　? 故一般开启了子元素的绝对定位都会同时开启父元素的相对定位。

　　2、开启绝对定位的元素会脱离文档流。故绝对定位会改变元素性质，

　　　　内联会变成块，块的宽高默认都被内容撑开。

　　3、绝对定位也会使元素提升一个层级。

　　4、开启绝对定位而不设置偏移量时元素位置不变化。

 

fixed

与绝对定位不同的地方：

　　1、固定定位永远相对于浏览器窗口进行定位。

　　2、固定定位会固定在浏览器窗口的某个位置，不会随着滚动条而滚动。

　　　　（广告、视频、回到顶部等）

　　3、ie6不能兼容固定定位。

 

元素的层级

　　1、若定位元素的层级一样，则下边的元素会盖住上边的元素。（代码后写的盖住先写的）

　　2、可通过z-index属性来设置元素的层级。

? 　　　　为z-index指定一个正整数作为其值，该值将会作为当前元素的层级。

? 　　　　　　a、层级越高，越优先显示；

? 　　　　　　b、父元素的层级再高，也不会盖住子元素；

? 　　　　　　c、对于没有开启定位的元素不能使用z-index.

 

背景图片

　　1、设置背景图片的重复方式：

? 　　　　可选值：repeat 默认值（双方向重复）

?　　　　　　　　 no-repeat 不重复（有多大就显示多大）

? 　　　　　　　　repeat-x 背景图片沿水平方向重复

?　　　　　　　　 repeat-y 背景图片沿垂直方向重复

　　2、若背景图片大于元素默认显示图片的左上角，一样大就全部显示，小于就平铺。

　　3、语法：background-image：url（相对路径）；

　　4、可同时给一个元素指定背景颜色和背景图片，则背景颜色将成为图片底色。

　　　　（一般同时指定）

　　5、背景图片默认贴着元素的左上角显示。

? 　　　　可通过background-position来调整背景图片在元素中的位置。

? 　　　　　　a、该属性可使用top、bottom、left、right、center中的两个值来指定。

? 　　　　　　　　如果只给一个值，则第二个之默认为center。

? 　　　　　　　　“九宫格“ top left 左上； center center 居中；

? 　　　　　　b、也可直接指定两个偏移量： 水平偏移量 垂直偏移量

　　6、可通过background-attachment设置背景图片是否随页面一起滚动。

? 　　　　可选值：scroll 默认值 背景图片随窗口滚动

?　　　　　　　　 fixed 背景图片会固定在某一位置 （不随窗口滚动的图片一般设置给body）

　　7、背景的简写属性

?　　　　background属性可同时设置所有背景相关样式。

　　　　无顺序、数量要求，不写的样式则使用默认值.

 

? 示例：background:#bfa url(img/1.jpg) center center no-repeat fixed;