CSS学习笔记——CSS定位

position基本属性

属性
inherit 规定应该从父元素继承 position 属性的值。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 ,
relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 left位置添加 20px。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
sticky CSS3新属性,表现类似position:relative和position:fixed的合体,在目标区域在屏幕可见时,他的行为就像position:relative;而当页面滚动超出目标区域,他的行为就像position:fixed。

定位机制

  • 普通流。默认定位方式,在普通流中元素框的位置由元素在html中的位置决定。其中position:static和position:relative属于普通流的定位方式
  • 浮动定位
  • 绝对定位。包括absolute和fixed

absolute和fixed

  • 绝对定位使元素与文档流无关,也不占据文档流空间。普通元素布局就像绝对元素不存在一样
<div style="height:100px;width:100px;background-color:red;"></div>
<div style="height:100px;width:100px;background-color:green;position:absolute;"></div>
<div style="height:100px;width:100px;background-color:yellow;"></div>
  • 绝对定位的元素位的是相对于距离最近的非static祖先元素位置绝当的。如果元素没有已定位的祖先元素,那么他的位置就相对于初始包含块html来定位。
<div style="margin-top:100px;border:1px solid pink; width:400px;">
    <div style="height:100px;width:100px;background-color:red;"></div>
    <div style="height:100px;width:100px;background-color:green;position:absolute;top:20px;left:20px"></div>
    <div style="height:100px;width:100px;background-color:yellow;"></div>
</div>
// 给父元素加上position:relative
 <div style="margin-top:100px;border:1px solid pink; width:400px;position:relative">
    <div style="height:100px;width:100px;background-color:red;"></div>
    <div style="height:100px;width:100px;background-color:green;position:absolute;top:20px;left:20px"></div>
    <div style="height:100px;width:100px;background-color:yellow;"></div>
</div>
  • 绝对定位的元素可以覆盖页面上的其他元素。可以通过z-index属性控制叠放顺序。
  • fixed 固定定位,是绝对定位的一种。差异:固定元素的包含块儿是视口(viewport)
  • 绝对定位宽度是收缩的,若想撑满父容器,可以设置width:100%。该属性使content等于父content宽度
  • 行内元素增加绝对定位或浮动。会拥有块级元素特性

绝对定位元素居中

// 方式一
.center{
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
}
// 方式二
.center{
    position:absolute;
    top:calc(50% - 50px);
    left:calc(50% - 50px);
}
// 方式三
.center{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%)
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,856评论 0 15
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 1,139评论 0 5
  • 在CSS中关于定位的内容是:position:relative | absolute | static | fix...
    feelinghappy618阅读 662评论 0 0
  • http://www.jianshu.com/p/4a1f36e9ca32参考链接 1.谁受浮动的影响,就让谁清除...
    温柔你要送嘻嘻阅读 167评论 0 0