十七、无素定位position

定位:

position
值有相对定位(relative)、绝对定位(absolute)、固定定位(fixed)

遍移量:
left
top
right
bottom

1.相对定位relative

针对自己本身的位置进行定位
*不影响元素本身的特性
*不使元素脱离文档流
*提升层及
*相对定位是不可以清除元素中的浮动

2.绝对定位absolute

 针对有定位的父级的原点进行定位:如果父级没有定位,会找父级的父级,直到找到父级父级有定位,才开定位。如果所有的父级都没有定位属性,那就与document原点进行定位。
 *会使元素完全脱离文档流
 *内容撑开宽度和高度
 *使用元素支持所有css样试
 *提升层级 z-index
 *绝对定位和相对定位一般都要配合使用
 *绝对定位会清除margin 中的auto
 *绝对定位可以清除子元素中的浮动

3.固定定位fiexd
*针对页面窗口进行定位
left top 比 right bottom 的优先级要高

 *不支持 IE6

上课案例:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,870评论 1 92
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,881评论 0 15
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,277评论 0 1
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:浮动元素脱离普通文档流,普通...
    山门龙龙阅读 325评论 0 2
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 814评论 0 0