资讯专栏INFORMATION COLUMN

css之定位

zhangwang / 3308人阅读

摘要:定位分为种方式静态定位,相对定位,绝对定位,固定定位静态定位相对定位根据自身原来的位置定位,没有脱离标准流绝对定位定位的元素没有父元素的情况下,根据浏览器的可视区域定位定位的元素有父元素,父元素无定位或父元素有静态定位,根据浏览器可

定位分为4种方式:静态定位,相对定位,绝对定位,固定定位

静态定位:position:static

相对定位:position:relative

  根据自身原来的位置定位,没有脱离标准流

绝对定位:position:absolute

  1.定位的元素没有父元素的情况下,根据浏览器的可视区域定位;

  2.定位的元素有父元素,父元素无定位(或父元素有静态定位),根据浏览器可视区域定位;

  3.定位的元素有父元素,父元素有定位(非静态),根据父元素定位;

固定定位:position:fixed

  根据浏览器可视区域定位,与父元素无关

定位的元素如果要在父元素中垂直水平居中:

  top:50%     margin-top: -(定位元素高度的一半);

  left:50%     margin-left: -(定位元素宽度的一半);

层级:z-index  只能给定位的元素添加  默认值:auto

  数值越大,层级越高,盒子越靠上

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

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

相关文章

  • 天坑,CSS定位Position(六分五)

    摘要:下文称位置属性即为。注意,不会脱离文档流,具体见下面的图示。直译为修正,简单粗暴,直接相对浏览器窗口显示区域定位。 Position定位 个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute,当年可是被虐的不轻。当然了,现在爱上了这个属性,谁用谁知道。 position属性 position是CSS的一个属性,地位较高,也是我们重点要说的一个属性。 对应了四...

    anRui 评论0 收藏0
  • 天坑,CSS定位Position(六分五)

    摘要:下文称位置属性即为。注意,不会脱离文档流,具体见下面的图示。直译为修正,简单粗暴,直接相对浏览器窗口显示区域定位。 Position定位 个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute,当年可是被虐的不轻。当然了,现在爱上了这个属性,谁用谁知道。 position属性 position是CSS的一个属性,地位较高,也是我们重点要说的一个属性。 对应了四...

    xuweijian 评论0 收藏0
  • CSS基础知识position

    摘要:最近在慕课网学习了网页布局基础和固定层效果,都是由声音甜美的婧享人生老师所录制,视频详细讲解了中的用法,在此把学习笔记分享给大家。 最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家。 CSS定位机制 标准文档流(Normal flow) 浮动定位(Floats) 绝对定位...

    xiaowugui666 评论0 收藏0
  • 【学习笔记】CSS深入理解absolute

    摘要:张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似,都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性,使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应,可应用于大范围的布局。 《张鑫旭的CSS深入理解之absolute》学习笔记 绝对定位的特性 绝对定位与浮动相似,都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代 绝对定位的行为表现 无依赖绝对...

    Anleb 评论0 收藏0
  • 前端面试CSS总结(上)

    摘要:重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试,所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上),有许多地方叙述的并不是十分详细,只是大致的描述一下,给自己提供一个知识轮廓。本篇中主要描述...

    琛h。 评论0 收藏0

发表评论

0条评论

zhangwang

|高级讲师

TA的文章

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