html - 元素定位。在定位（不是变换）时更改基点（左上角）

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/

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

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