zoukankan      html  css  js  c++  java
  • 定位position

    定位position

    利用定位,可以准确地定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

    position的三种定位机制(relative,absolute,fixed)

    • 取值:static,relative,absolute,fixed,inherit
      • static(默认):元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
      • relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留
      • absolute:元素框从文档流中完全删除,并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
      • fixed:元素框的表现类似于absolute,不过其包含块是视窗本身。
    • 可应用与所有元素
    • 没有继承性

    包含块

    浮动元素的包含块是最近的块级祖先元素;定位元素的情况较为复杂:

    • 根元素(html元素或body元素)的包含块(即初始包含块)由用户代理建立。一般初始包含块是视窗大小的矩形。
    • 非根元素
      • position为relative或static,包含块由最近的块级框、表单元格或行内块祖先框的内容边界构成。
      • position为absolute,包含块是最近的position为非static的祖先元素(可以任意类型)。

    注意:元素可以定位到其包含块的外面。这与浮动元素使用负外边距浮动到其父元素内容区外面类似。这说明,“包含块”实际上是“定位上下文”。

    4个offset(偏移)属性

    上面的三种定位机制(relative,absolute,fixed)完成定位的很重要的一部分是:使用4个偏移属性来描述定位元素各边相对于其包含块的偏移。

    • 取值:top,right,bottom,left
    • 只用于定位元素(即position非static的元素)
    • 无继承性
    • 可以使用百分数,auto,正值或负值(正值向内偏移,负值向外偏移)

    :以left为例,为正值时,把定位元素的外边距边界移到包含块左边界右边;为负值时,把定位元素的外边距边界移到包含块左边界左边。

  • 相关阅读:
    前端常用模板引擎- artTemplate
    Vue-多级组件嵌套传值
    echarts图表常用到的设置
    react-基础入门分享
    vue中 export const 和 export default的区别
    vue安装依赖报错
    nvm-node版本控制工具
    gulp-入门
    vue 中使用 iconfont
    c3中基本动画
  • 原文地址:https://www.cnblogs.com/seven7seven/p/4097592.html
Copyright © 2011-2022 走看看