位置：絕對H1元素向右溢出

Question

我有一個包含以下所有CSS規則的容器（取自Chrome開發者工具欄）：

border-bottom-color: rgb(85, 85, 85);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(85, 85, 85);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(85, 85, 85);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(85, 85, 85);
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: rgb(85, 85, 85);
display: block;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 100;
height: 680px;
line-height: 25.9200000762939px;
margin-bottom: 0px;
margin-left: 411.5px;
margin-right: 411.5px;
margin-top: 0px;
max-width: 1080px;
padding-bottom: 40px;
padding-left: 60px;
padding-right: 60px;
padding-top: 40px;
position: relative;
text-shadow: none;
vertical-align: baseline;
width: 1080px;

以下CSS規則包含一個子h1元素：

h1 {
    font-size: 42px;
    line-height: 42px;
    position: absolute;
    top: 50%;
    top: calc(50% - 21px);
    right: 0;
    text-align: right;
    margin: 0;
    padding: 0;
}

但是，文本溢出到容器的右側：

如何確保h1元素捕捉到父元素的右側，而不會出現過度堆積？

編輯：與iPad圖像的另一個元素具有以下CSS代碼：

.ipad {
    width: 251px;
    height: 600px;
    background-image: url(../img/ipad.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: absolute;
    left: 0; top: 0;
}

HTML如下：

<div class="canvas">

    <div class="wrapper normal referrals">

        <div style="position: relative;">

            <div class="referrals fade ipad" data-order="1"></div>

            <h1>Referrals</h1>

        </div>

    </div>

</div>

h1元素如何忽略父元素的填充，而另一個元素卻沒有呢？

Answer 1

h1元素的position: absolute; 因此它不在乎父級是否有填充。 您可以這樣解決。

right: 60px; 其中60px是容器padding-right 。

Answer 2

您的h1標簽的position: absolute; right:0 position: absolute; right:0 ，這意味着它將在容器的最右端呈現，這正是發生的情況。 如果我理解正確，那么您的問題是您還要考慮容器的填充，在這種情況下，您應該使用right: 60px; （因為容器的填充為60px）。 或者，您可以使用float:right; 而不是絕對定位，盡管效果如何還取決於標記的其余部分。

Answer 3

您的其他元素未溢出填充的原因是因為它具有DISPLAY：absolute而不是POSITION：absolute;

用position:relative;創建一個新的div .container position:relative; 在您的div .wrapper 。

的HTML

<div class="wrapper normal referrals">
    <div class="container">
        <div class="referrals fade ipad" data-order="1"></div>
        <h1>Referrals</h1>
    </div>
</div>

的CSS

.container {
    position:relative;
}

Answer 4

您可以使用right：60px（容器padding-right），也可以在第一個容器內創建另一個包裝，位置相對