页面布局:absolute/relative/float

块元素前后都要独占一行而內联元素不需要,这是基础。

position:fixed    当元素设置该属性之后,这个元素脱离文档流,且不跟随页面的滚动.这是和absolute的最大区别.当元素的高度大于可视区域的时候,铺满整个窗口之后下面的就看不到了,因为fixed不随页面滚动.设置absolute 的时候就可以看的到了.第二个区别是fixed是相对window定位的,父元素可以认为是window窗口.而position虽然脱离原来的文档流,但是如果设置了父元素为relative或者absolute,则相对父元素定位,否则一直向上找,直到找到html根元素.

position:relative    定位相对的是元素本身应该出现的位置,不会脱离文档流,也即,虽然该元素相对本应该出现在的位置发生了偏移,但是本应该占的位置还会保留,下一个元素不能忽视它的存在。然后通过top,left等来偏移,同时原来的位置继续保留.相当于要占据两个位置.偏移后并不会把下面的元素想下挤,而是和下面的元素,不管是文本还是块元素,重叠起来,通过设置z-index来移动.


relative布局效果

position:absolute  相对的是第一个设置了relative或者absolute定位的祖先元素的位置,且会脱离文档流。


absolute布局效果

flota:left   元素脱离文档流.会占据新的位置空间,原先占据的位置就释放了出来。其他的元素,比如文字,会环绕其中.比如一个块元素,当没设置浮动的时候,它会独占一行,兄弟元素或者文本会在新的一行开始,设置浮动之后,下面的内容会在之后开始排版,形成环绕效果.


清除浮动:clear:both;是对受到浮动影响的后面的元素进行的.

另一种清除浮动的方式是对受到影响的元素设置:overflow:hidden;width:100%;

让多张图重叠到一起的解决方案:设置个父元素来装这些东西

该父元素设置overflow:hidden;position:relative

子元素position:absolute。

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

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,709评论 1 92
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,382评论 0 5
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 8,100评论 0 7
  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 4,776评论 0 3
  • 一. 活动日期时间地点:7月26日星期三下午两点半 1号厅 二. 活动安排 场地布置:26号上午10:00 领...
    学徒今妙阅读 8,943评论 0 2

友情链接更多精彩内容