html语言position,html中css的position定位属性

最新推荐文章于 2023-07-16 14:01:22 发布

音速键盘猫

最新推荐文章于 2023-07-16 14:01:22 发布

阅读量210

点赞数

文章标签： html语言position

position属性指定一个元素(静态的，相对的，绝对或固定)的定位方法的类型。

下面详细说一下各个属性的值。

absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位(没有的话相对于Body文档本身定位)。绝对定位的元素会脱离文档流的布局，遗留下来的空间由后面元素填充。绝对定位具有包容性和破坏性。

absolute的一些特性和使用技巧：

1.当行内元素设置绝对定位后可以设置width和height。

2.不和relative拴在一起的absolute更强大，比如独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏。

3.无依赖的绝对定位的使用，即不受relative限制的absolute定位，不使用top/right/bottom/left任何一个属性或使用auto作为值。它会表现为，脱离文档流，并且处在原来的位置。特性是去浮动(绝对定位生效的时候浮动一定会失效)和位置跟随(原来在什么位置，绝对定位后还是在什么位置)。利用无依赖的绝对定位，可以轻松实现图标和文字的对其，居中和边缘对其，下拉列表对其等效果。

4.如果有两个标签都有绝对定位，那后边的层级在前。所以没有必要设置多个z-index来确立层级关系。

5.当绝对定位方向时对立的时候，即left,right一起存在，或是top,bottom一起存在的时候，结果不是瞬间移位，而是标签的拉伸。即这个时候，absolute的定位可以和width/height相互替换。用这个 absolute定位方向对立时的拉伸特性，可以简单解决一些效果，例如，实现一个距离右侧200像素的全屏自适应容器层。代码可以写为：position:absolute; left:0;right:200px;top:0;bottom:0;

注意事项：容器无需固定width/height值，内部元素亦可拉伸。就算父容器的height值为auto，只要容器绝对定位拉伸形成，也可以支持百分比高度。当absolute拉伸和width/height尺寸同时存在时， width/height设置的尺寸大于left/top/right/bottom拉伸的尺寸。

relative：生成相对定位的元素，相对于其正常位置进行定位。不脱离文档流布局，只改变自身位置，在文档流原先的位置遗留空白区域。relative提高层叠上下文是最厉害的，别的方法都不如它。relative可以从各方面限制绝对定位，如：

1.限制left/top/right/bottom定位(绝对定位的元素只能在relative的容器范围内定位)。

2.限制z-index层级(绝对定位元素的层级受relative的容器的层级的影响)。

3.限制overflow下的表现(当最近的祖先容器设置了相对定位后，绝对定位元素会受overflow的影响)

4.对于fixed定位，只有z-index层级的限制起作用。

relative的使用原则

1.尽量避免使用relative

2.最小化使用原则(非要使用的情况下可以单独在外层加div标签设置relative)

fixed：生成固定定位的元素，相对于浏览器窗口进行定位。类似于absolute，但不随着滚动条的移动而改变位置。

static：默认值，没有定位，元素出现在正常的文档流中。忽略top,bottom,left,right或者z-index。

inherit：规定应该从父元素继承position属性的值。

*文章为作者独立观点，不代表上流阁立场