如何將文本作為疊加層放置在垂直對齊到div左上角的圖像上

Question

使用下面的代碼，為什么COMING SOON文本會進一步向右移動而不會向左對齊。 文本必須垂直放置在圖像的左上角

HTML：

<div class="grid">
    <div class="block">
        <div class="badge">NEW</div>
    </div>
    <div class="block">
        <div class="badge">SALE</div>
    </div>
    <div class="block">
        <div class="badge">COMING SOON</div>
    </div>
</div>

CSS：

.grid{display:block;width:100%;}
.block{width:255px;height:255px;border:1px solid #333;margin:12px;float:left;position:relative;}
.badge{position:absolute;transform:rotate(90deg);top:12px;left:0;}

Answer 1

我會把transform:rotate(90deg)放到.block類這里 。 同時將.badge的top屬性更改為230px 。

CSS：

.grid{display:block;width:100%;}
.block{transform:rotate(90deg);width:255px;height:255px;border:1px solid #333;margin:12px;float:left;position:relative;}
.badge{position:absolute;top:230px;left:0;}

Answer 2

使用transform-origin 。 它告訴瀏覽器哪個點應該transform: rotate發生。

查找代碼： http ： //jsfiddle.net/yv0Lugp8/1/

有關transform-origin的更多信息可以在這里找到

編輯：更新代碼后更改了URL。

Answer 3

你tranform-orgin是錯誤的（實際上是缺乏的。）

參見DEMO

以下是相關的CSS

.badge {
    transform:rotate(90deg);
    transform-origin: left top 0;
    float: left;
    position:absolute;
    left: 14px;
}

我還將.badge向左移動了14px以偏移.block 12px邊距和1px邊框。 我添加了float: left到.badge 。 見這篇文章

Answer 4

transform-origin屬性將在這里幫助您。 默認情況下，我認為變換原點位於'.badge'元素的中心，因此當旋轉90度時，文本會遠離'.block'元素。

嘗試更改“徽章”類，如下所示：

.badge {
    position:absolute;
    transform:rotate(90deg);
    transform-origin:0px 15px;
    top:12px;
    left:0;
}

您可能希望移動值以適應您的喜好。