Overflow 和绝对相对定位问题求解答

Posted 2023-04-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Overflow 和绝对相对定位问题求解答相关的知识，希望对你有一定的参考价值。

参考技术A 绝对定位和相对定位是dreamweaver中CSS设置规则的一种模式。相对定位：跟它的名一样，要有一个参照物，但这个参照不是别的，是它自己，也就是说没设相对定位的位置。也就是设了才能相对自己原来的位置偏移

CSS绝对定位与相对定位的区别？

参考技术A

定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。

在这四种方案中，静态和相对定为不会影响整个文档布局，而绝对和固定定位则会脱离文档，因此页面不会为这两类定位元素预留空间。在预设状态下，所有元素均是静态的定位方式，也即这些元素按照原本的从上到下及从左到右的顺序进行排布。

只要为该元素设定了「position」属性，你就可以使用「top」、「right」、「bottom」和「left」这四个属性来精准定义其应该所在的地方。

在这个示例中，归属Element类别的元素将相对于其原来所在的位置分别向右和向下移动50个像素。若在此将「position」的值改为「absolute」或「fixed」，那么该元素将离最近的已定位的祖先元素的左边缘和上边缘分别距离50个像素。

我们一般使用「left」和「top」这两个属性就够了。如果想要避免元素在定位后，其尺寸会随着浏览器视窗的变化而变化出意想不到的结果，那么你应该先设定好该元素的大小，然后再定位其左上方的点。

相对定位

相对定位是相对于正常排列的位置进行偏移，该元素原本所在的位置会被空出来，空出来的部分仍然会影响到后续元素的排列效果。

如上图所示，position:relative仅仅影响了元素本身，其原有位置被保留，但由于它向右上方进行偏移，因此遮住了第一部分文字的部分区域。

元素是相对于包含它的块来定义的，这个块是当前定位元素的父元素或祖先元素。在上例中，<body>即为包含这三个段落的块。如果对样式表做一些修改，新增

然后将这三个段落放在ID为「Pos」的<div>标记内，那么这三个段落将集体向右偏移50个像素，而其中的「Element」类别的段落将以这个<div>为基准进行偏移——即相对于包含它的块进行偏移。

除了包含块以外，还有匿名块。如果包含块内同时有块级元素和巢状元素，那么浏览器将自动建立匿名块：

当这两种元素混杂在一起时，匿名块能够让浏览器正确地建立页面布局。如果将上述<div>的定位方式由「static」改为「relative」，那么，匿名块能够正确地安排其中的巢状文字和段落。

如果有两个相对定位的元素以巢状形式出现，那么内部的那个元素是相对于外部的——也就是它的父元素来定位，而外部的那个元素是相对于<body>来定位的。

绝对定位

相对定位中的「top」、「right」、「bottom」和「left」被用于设定相对于该元素原本所在位置的偏移量，而绝对定位的这四个属性则不太一样。在绝对定位中，「top」指的是被定位元素上方的外边框和包含块上方的内边框之间的距离。换句话说，被定位元素的外边距和包含块的边框会影响top的值，进而影响绝对定位元素的位置，但包含块的内边距不会产生任何影响。在相对定位中，「top」指的是被定位元素上方的外边框和其原始位置的上边缘的距离。

「bottom」的含义与「top」差不多，它指的是该定位元素下方的外边框和包含块下方的内边框之间的距离。「left」和「right」也大抵如此。

这样看来，定义元素的尺寸又多了一种新方式，除了直接设定其「width」和「height」属性以外，你还可以同时定义「left」和「right」来设定其宽度，同时定义「top 」和「bottom」来设定其高度，设置可以同时定义这四个属性，这样的话，该元素的尺寸就完全定下来了。如