可以在不设置'top”、'left”、'bottom”或'right”的情况下使用'position:absolute”吗？

Position: Absolute 不设置 Top/Left/Bottom/Right？

在 CSS 中，position:absolute 属性允许你从正常的文档流中删除一个元素，使其相对于其容器绝对定位。但是，有时您可能希望使用position:absolute，而不为顶部、左侧、底部或右侧属性设置显式值。

情况#1：

可以使用此方法的一种场景当您想要相对于同一容器中的另一个元素定位一个元素时，很有用。例如，您可能希望将徽标放置在标题中的照片上方，如下面的 HTML 和 CSS 示例所示：

<a>

#logo {
  position: absolute;
  margin: 10px;
  /* or padding: 10px; */
  /* or border: 10px solid transparent; */
}

在此示例中，设置position:absolute而不指定a top 值将徽标定位在照片上方 10 像素处，使用照片的上边距作为参考点。

案例 #2：

此技术可能有用的另一个实例是在使用表格时 -基于布局。例如，您可能想要创建一个跨越容器整个宽度的水平多级菜单。由于表格单元格不支持position:relative，因此您可以使用position:absolute，而不使用top/left/bottom/right值，如下所示：

<table>

#menu td {
  position: absolute;
  height: 100%;
  width: 100%;
}

在这种情况下，position:absolute属性无需任何附加值即可相对于表格边界定位表格内的每个单元格，从而允许您创建无缝对齐的绝对多级菜单。

根据 CSS 标准：

通常， CSS 规范规定，如果 top/bottom 或 left/right 属性设置为 auto，则它们应默认为元素的位置：静态值。但是，需要注意的是，浏览器实现对绝对定位的支持可能会有所不同，而无需显式设置顶部/左侧/底部/右侧值。

以上是可以在不设置'top”、'left”、'bottom”或'right”的情况下使用'position:absolute”吗？的详细内容。更多信息请关注PHP中文网其他相关文章！