Question

定位元素时遇到错误。浏览器通过查看左上角来计算元素的位置。

让我们说点（左上角）“基础”（抱歉的术语）当我使用对齐或中心对象时，它工作正常。但是，如果我用其他属性更改元素的位置，让我们说宽度：％50和高度：％50，浏览器不会将元素移动到中间，它会将元素的“基础”移动到中间。

有没有办法将这个“基础”更改为该元素的其他位置？例如，我可以制作元素右下角的“基础”吗？

Answer 1

我想我明白你要问的是什么。简而言之，答案是否定的。但是，如果你使用绝对定位，并看看这个快速测试：

HTML

<div class="wrap">
  <div class="absolute">
  </div>
</div>

CSS

.wrap { 
    position: relative;
    width:400px; height:400px;
    background: red; }

.absolute {
    position: absolute;
    bottom:0; right:0;
    width:100px; height:100px;
    background: blue; }

你应该看到div.absolute的位置是基于它的右下角。绝对定位可以这种方式使用。请看这里的小提琴：http://jsfiddle.net/3RqSS/

否则，您需要使用绝对定位和边距的组合来居中。 E.g。

.absolute {
        position: absolute;
        top:50%; left:50%;
        width:100px; height:100px;
        margin-left: -50px;
        margin-top: -50px;
        background: blue; }

元素定位。定位时改变基点（左上角）（不变换）

1 个答案: