资讯专栏INFORMATION COLUMN

浅析CSS定位

ACb0y / 1304人阅读

摘要:属性有种值表示没有定位,元素出现在正常的文档流中。为静态定位的元素设置不起作用。元素的位置相对于浏览器窗口是固定位置。定位使得元素脱离了文档流,因而不占据空间。设置了绝对定位的元素宽高由其内部元素撑起。

position 属性指定了html元素的定位类型。

position 属性有 4 种值:
1. static(default)
表示没有定位,元素出现在正常的文档流中。
为静态定位的元素设置 top|bottom|left|right 不起作用。

2. fixed
元素的位置相对于浏览器窗口是固定位置。
即使浏览器的窗口是滚动的它也不会移动。
fixed定位使得元素脱离了文档流,因而不占据空间。
设置了固定定位的元素宽高由其内部元素撑起。

3. relative
相对定位的元素是相对其正常位置。

由截图可以看出来,元素相对其正常位置向下向右移动了100px,但是它原本所占的空间并不会改变。

并且其后的同一个父容器里的元素会一起相对向下向右移动100px,与其父容器平级容器里的元素不受影响。
相对定位元素经常被作为绝对定位元素的容器块。

4. absolute
绝对定位的元素的位置是相对其最近的已定位父元素(也就是除static之外),如果找不到已定位的父元素,那么就相对于元素。

absolute定位使得元素脱离了文档流,因而不占据空间。
设置了绝对定位的元素宽高由其内部元素撑起。

ps: 5. sticky 粘性定位 ???

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114189.html

相关文章

  • CSS中Background浅析

    摘要:如果只指定其中一个值,另一个值会被设定为因此可以和混用。通过设定负的,背景图像的一部分被拖拽到父元素之外,从而在父元素之内显示要显示的内容。随着的普及,相信渐变将成为主流。可以显示的显示范围。 作为一个有理想有包袱的页面仔,正像鑫哥在这篇文章说说CSS学习中的瓶颈(强烈推荐)里说的 其实,广大页面屌丝们并不畏惧那些学习能力强的人,畏惧的是那些学习能力强,同时,尼玛学习又拼命的人。页面仔...

    objc94 评论0 收藏0
  • BFC与自适应浅析

    摘要:最常见的有简称和简称。的区域不会与重叠。也就是说只要父容器形成就可以,触发方式见上清除浮动比较好的方法以上用,用更好的方法自适应布局触发自适应属性对比参考资料张鑫旭老师的博客 本文是从之前的csdn上的乱七八糟的笔记整理过来的 概念   Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何...

    makeFoxPlay 评论0 收藏0
  • 浅析BFC布局的概念以及作用

    摘要:的概念以及作用的概念以及作用的定义的定义直译为块级格式化上下文。是的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。BFC的概念以及作用 BFC的定义: (Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内...

    荆兆峰 评论0 收藏0
  • CSS属性中经常出现的百分比

    摘要:绝对单位英寸磅相对单位与元素字号挂钩与元素字体的高度挂钩与根元素字号挂钩与像素挂钩另一属性值的百分比。定义基于父元素宽度的百分比的缩进。参考权威教程节样式可以使用百分比的属性总结浅析属性之中经常出现的百分比 起源:一道面试题(猫眼电影) 问题:css中的单位都有哪些?可以取百分数的单位有哪些?其中margin-top取百分数时是相对于谁来计算的? 回答: (1)css中的单位:CSS规...

    mylxsw 评论0 收藏0
  • 浅析一波路由的hash 和 history 的区别与实现原理以及服务器刷新404的问题及解决方法

    摘要:满足单页面的需求。的原理略微复杂一点,它可以通过去变动内容,不会造成页面刷新。既然浏览器不会刷新。这样的话,就可以做到刷新页面不崩的效果。如果有服务器部署基础的可以拿此类的服务器试试,我自己这边是默默地拿着配置成功了 先解释下基本概念hashhash 不是那个哈希算法,就是以前url用的锚点,以前是多用来定位页面展示内容。代表符号是#之所以用hash是因为他既可以获取到,又可以不去刷新...

    APICloud 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<