本篇文章给大家带来了关于css的相关知识,其中主要介绍了关于css的相对定位、绝对定位和固定定位的相关问题,css中的position属性,position有四个值:relative(相对定位)、absolute(绝对定位)、static(静态定 ...
本篇文章给大家带来了关于css的相关知识,其中主要介绍了关于css的相对定位、绝对定位和固定定位的相关问题,css中的position属性,position有四个值:relative(相对定位)、absolute(绝对定位)、static(静态定位)和fixed(固定定位),通过top、left、bottom、right来调整元素位置,下面一起来看一下,希望对大家有帮助。 (学习视频分享:css视频教程、html视频教程) 一、什么是定位?css中的position属性,position有四个值:relative(相对定位)、absolute(绝对定位)、static(静态定位)和fixed(固定定位),通过top、left、bottom、right来调整元素位置 二、各个属性值的作用
1、相对定位相对定位的偏移元素参考的是元素本身,不会使元素脱离文档流,元素的初始位置占据的空间会被保留 html代码:
可以看出相对定位是相对于元素本身来说,其中距离顶部30px,距离左边20px,并且没有脱离文档流 2、绝对定位绝对定位是相对于已定位的最近的祖先元素,如果的最近的祖先元素没有设置定位,那么它的位置就相对于最初的包含块(body) css代码:
可以看到绝对定位脱离文档流,由于父级元素未进行定位,所以是以最初的包含块(body)进行定位,现在将该元素的父级元素进行定位 css代码:
3、静态定位没有特别的设定,不脱离文档流,遵循基本的定位规定,不能通过z-index进行层次分级 css代码:
4、固定定位固定定位相对于浏览器窗口,脱离文档流,使用fixed的元素不会随窗口的滚动而滚动 html代码: css代码: 网页效果(未设定固定定位): 三、相对和绝对定位将三个色块来区别相对定位和绝对定位 未进行定位时,默认网页效果: 1、相对定位css代码:
2、绝对定位css代码:
3、相对定位和绝对定位为了使效果更加明显,这里将红、黄、蓝三色块进行一定程度的偏移 (1)相对定位css代码: (2)绝对定位css代码:
四、相对、绝对定位与浮动绝对定位和浮动都脱离文档流 1、相对定位css代码:
2、绝对定位css代码:
3、浮动css代码:
4、相对定位与浮动css代码:
5、绝对定位和浮动css代码:
五、z-index的使用若要将下面的色块中红色色块显示在黄色色块上面,可以使用z-index
(学习视频分享:css视频教程、html视频教程) 以上就是css定位详解--相对定位、绝对定位和固定定位的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! ![]() |