5.CSS定位

作者: White夏天baby | 来源:发表于2020-09-25 10:20 被阅读0次

定位

positon: relative(相对)、absolute(绝对)、static(无定位 )、fixed(固定)

相对定位的偏移参考元素是元素本身,不会使元素脱离文档流。元素的初始位置占据的空间会被保留

position:relative

设置相对定位的元素不会脱离文档流

个人理解:相对定位的元素,灵魂出窍了,身体还在那里。

行对定位通常不单独使用,而是作为父元素使用

绝对定位:相对于已定位的最近的祖先元素,如果没有已定位的最近的祖先元素,

那么它的位置就相对于最初的包含块(如body)就是body

一般情况下相对定位与绝对定位都是搭配使用

相对定位不破坏文档流,绝对定位破坏文档流

float与绝对定位的相同点与区别

相同点:都会产生浮动,都会破坏文档流

区别:float浮动后,其他元素不会被浮动的float元素遮挡,而绝对定位的元素会遮挡其他的元素

相对定位和浮动可以组合起来使用

z-index属性设置,在绝对浮动的时候,属性值越大,越会在上面显示

固定定位:相对于浏览器窗口进行固定定位

position:fixed

我的网盘>前端入门第N次>CSS定位

相关文章

  • 5.CSS定位

    定位 positon: relative(相对)、absolute(绝对)、static(无定位)、fixed(固...

  • 2021百度前端面试题一面

    1.eventLoop 2.setTimeout 误差原因 3.深浅拷贝 4.跨域原因及解决方案 5.css放在头...

  • js面试题

    1.eventLoop 2.setTimeout 误差原因 3.深浅拷贝 4.跨域原因及解决方案 5.css放在头...

  • day03

    A今天学了什么 1.css背景: 2.css文本: 3.css字体: 4.css链接: 5.css列表样式(针对u...

  • day03

    今天学了什么 1.css的背景 2.css 文本 3.css字体 4.css链接 5.css列表样式(针对ul) ...

  • 5.CSS实战技巧

    1.CSS背景 2.背景图片 3.CSS规避脱标 4.CSS元素可见性 5.CSS标签包含 6.CSS内容移除某个...

  • 5.CSS用户界面样式

    所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验。 更改用户的鼠标样式 表单轮廓等。 防止表单域...

  • day01

    我今天学到了什么 1.THML和CSS 2.THML标签 3.常见THML标签 4.常用CSS样式 5.CSS常用...

  • day03

    A.今天学了什么 1.css背景 2.css文本 3.css字体 4.css链接 5.css列表样式 6.边框 7...

  • CSS渲染原理以及优化策略

    本文目录: 1.浏览器构成 2.渲染引擎 3.CSS 特性 4.CSS 选择器执行顺序 5.CSS 书写顺序对性能...

网友评论

    本文标题:5.CSS定位

    本文链接:https://www.haomeiwen.com/subject/bgkeyktx.html