CSS中的position和float

对基础知识再度做个巩固和梳理。

一、position定位
(一):position的属性
  1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位;

  2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位;

  3.static:默认值,没有定位,元素出现在正常的文档流中;

  4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动;

  5.sticky:(CSS3)有兼容性问题,它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

(二):关于position使用一般会引发的问题
   1.假如有一个默认100%宽度的div,一旦加上absolute绝对定位,该元素立马inline-block化,默认宽度就会自适应元素内部宽度,会导致页面的宽高塌陷。

   2.由于absolute绝对定位的灵活性,对于普通的页面布局,有时出于省事的原因很容易造成absolute/relative/top/left/z-index的滥用,这样会使后期的扩展和维护造成麻烦

(三):position代码示例
  1.relative相对定位。

  

对象2相对于自身文档流原来位置移动,并还占据着文档流,下面的黄色块继续按照它原来的位置往下排列,relative仅仅是视觉上位置变了。

复制代码
<style>
body{color: #fff;}
.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px}

position1 {height: 100px;background: green;}

position2 {height: 100px;background: blue;position: relative;top: 10px;left: 50px;}

position3{height: 100px;background: yellow;color: #000}

</style> <body> 对象1 对象2 对象3
上一篇:笔记哦


下一篇:Python:基于绝对XPath解析HTML元素