position：绝对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，这意味着它将在容器的最右端呈现，这正是发生的情况。如果我理解正确你的问题是你也想要考虑容器的填充，在这种情况下你应该使用right: 60px;（因为容器的填充是60px）。或者，您可以使用float:right;而不是绝对定位，但效果如何也取决于您的其他标记。

Answer 3

你的另一个元素没有溢出填充的原因是因为它有DISPLAY：absolute而不是POSITION：absolute;

在.container position:relative;内创建一个div的新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

你可以使用右：60px（容器填充右）或你可以在第一个容器内创建另一个包含位置相对的包装