html - 元素定位。定位时改 rebase 点(左上角)(不变换)

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 是根据它的右下角定位的。可以这样使用绝对定位。在这里查看 fiddle :http://jsfiddle.net/3RqSS/

否则，您需要结合使用绝对定位和边距来使内容居中。例如

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