关于CSS的position属性

loostudy 发布于2019-08-30 13:01 / 1012人阅读

摘要：元素脱离文档流元素相对于它包含的元素进行定位，相对于所有其他元素，绝对定位的元素是独立定位的。元素脱离文档流，相对于浏览器窗口进行定位与其他所有元素独立大多数浏览器支持，除外大概也没有公司要求必须支持了。。

未完待续......最近在读《CSS secrets》, 看完再来补充……

position

CSS的position属性用于指定元素的定位类型。默认值: static

4个可能的值: static

元素按常规文档流（从左到右从上到下）定位；

静态定位的元素不能使用 top, right, bottom 和 left 属性进行定位。

absolute

元素脱离文档流；

元素相对于它包含的元素进行定位，相对于所有其他元素，绝对定位的元素是独立定位的。

它的定位要么相对于最近的祖先元素，要么相对于文档本身。

fixed

元素脱离文档流，相对于浏览器窗口进行定位；

与其他所有元素独立；

大多数浏览器支持，IE6 除外（大概也没有公司要求必须支持 IE6 了=。=）。

relative

元素按照常规文档流布局，它的定位相对于他文档流中的位置进行调整；

系统保留元素在正常文档流中的空间，不会因为要填充空间而将其个边合拢，也不会将元素从新的位置“推开”。

一些实例

position 的值为 static 以外的值的元素，可通过设置元素 top 和 left 属性指定其左边缘到容器（通常是文档本身）左边缘的距离和其上边缘到容器上边缘的距离。

例如，定位一个距离文档左、上边缘分别是 100px 的 div 元素，可以指定如下样式：

如果一个元素使用绝对定位，它的 top 和 left 属性是它相对于 position 属性设置为出 static 以外的祖先元素的上、左边缘的距离。如果它没有设置过除 static 以外的祖先，则使用文档边缘进行定位。

效果如下：

任何绝对定位的子元素都相对于容器进行定位。

使用 top 和 left 定位元素的左上角位置是常见的定位方法，也可以使用 right 和 bottom 对指定元素相对于容器的右、下边缘进行定位。

除了指定元素 width 来确定元素宽度，还可用过指定 left 和 right 的方式（同样，也可通过指定 top 和 bottom 来指定元素的高度）。 同时指定时，width 优先级高于 right/left, height 优先级高于 bottom/top; left 优先级高于 right, top 优先级高于bottom.

没必要给每一个动态元素指定尺寸。 某些元素（如图片）具有固定尺寸。对于包含文本或其他流式内容的动态元素通常指定宽度就足够了，让布局决定它的高度。

GPU云服务器云服务器 position属性，css position，css css属性访问CSS属性

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

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

向Zepto学习关于"偏移"的那些事

摘要：获得当前元素相对于的位置。返回一个对象含有和当给定一个含有和属性对象时，使用这些值来对集合中每一个元素进行相对于的定位。获取对象集合中第一个元素相对于其的位置。结尾以上就是中与偏移相关的几个的解析，欢迎指出其中的问题和有错误的地方。前言这篇文章主要想说一下Zepto中与偏移相关的一些事，很久很久以前，我们经常会使用offset、position、scrollTop、scrollLe...

hzx 2019-08-22 11:20 评论0 收藏0
关于CSS中设置overflow属性的值为hidden的相关理解

摘要：非根元素，且其属性是和的元素的包含块它的包含块是由最近的祖先块容器盒的内容区域创建的。如何触发只需要保证满足下面至少一条就会触发根元素设置了值不为的元素设置了属性不为的元素设置了属性不为和的元素设置了的值为和中的任何一个的元素。作者：心叶时间：2018-04-18 17:53 包裹元素剪裁条件是不是包裹元素overflow设置为hidden以后，内部元素如果超过包裹元素的话就会被剪...

codercao 2019-08-29 15:06 评论0 收藏0
一些面试时关于 CSS 的问题

摘要：可以试试去掉的会发生很奇妙的事呢附加关于子元素设置为而引发的问题。附加关于开启硬件加速提升网站动画渲染性能问题。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 1. 水平垂直居中问题这可以说是最经典的问题了，水平垂直居中，这个问题从入门前端一直到面试，甚至到工作之后都会时不时遇到，最近的面试也被问过这之类的问题，这里还是好好总结一番，以作备忘。公用 HTML 部分： ...

HackerShell 2019-08-29 13:08 评论0 收藏0
关于CSS中的背景属性background简述

摘要：属性控制背景图片在被属性改变了大小及被属性定位后如何平铺。可用于此属性的关键字为和。对于长度和百分比，我们也可以指定沿轴和轴的位置。属性指定背景图片应根据盒模型的哪个区域进行定位。最后，属性是其他背景相关属性的简写。像我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写...

tomorrowwu 2019-08-02 16:15 评论0 收藏0