js:绝对定位和浮动的区别和运用

绝对定位和浮动的区别和运用


当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时)。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。

而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示,而没有脱离文档流,理解了这一点,就很容易弄明白什么时候用定位,什么时候用浮动了。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,692评论 1 92
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 4,419评论 0 4
  • 主要内容: 浮动的介绍、清除浮动、各种定位、BFC以及外边距合并的介绍。 浮动 什么是浮动元素 浮动元素是floa...
    苦瓜_6阅读 3,698评论 0 0
  • 自我总结: 浮动是实现布局的一种常见方式 浮动脱离普通文档流,即页面渲染时,盒模型按标准会将父元素所设置的属性将页...
    饥人谷_远方阅读 3,180评论 0 0
  • 这期我是歌手看的很纠结,我一直觉得新生时代里韩红和孙楠有一个还在就可以了,因为他们的成果已然有目共睹了,这两位歌手...
    箴言书屋_HANHAN阅读 1,558评论 0 0

友情链接更多精彩内容