положение: абсолютный элемент h1 перелив право

У меня есть контейнер, который имеет все следующие правила CSS (из панели инструментов Dev Chrome):положение: абсолютный элемент h1 перелив право

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;

Существует ребенок h1 элемента с этими правилами CSS:

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

Однако текст сливов справа от контейнера:

screenshot 1

screenshot 2

Как я могу гарантировать, что h1 элемент привязывается к правой стороне родительского элемента, без overspilling?

EDIT: Другой элемент, с 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 игнорирует заполнение родительского элемента, но другой элемент нет?

источник

2015-07-14 Ben

это положение: абсолютное не дисплей: абсолютная – DMande

Дисплей абсолютного не является правильным CSS – timo

@DMande спасибо ... поздние ночи и глупые ошибки! – Ben

Причина, по которой ваш другой элемент не переполняет прокладку, состоит в том, что он имеет ДИСПЛЕЙ: абсолютный вместо POSITION: absolute;

Создайте новый 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; 
}

источник

2015-07-14 08:10:03 timo

Элемент h1 имеет position: absolute;, так что ему все равно, есть ли у родителя прокладка или нет. Вы могли бы решить это так.

right: 60px; где 60px - это контейнеры padding-right.

источник

2015-07-14 08:07:35 TheFrozenOne

Элемент с изображением iPad имеет один и тот же родительский элемент и имеет абсолютное позиционирование, а 'left: 0;', так почему же это не прилипает дальше влево? – Ben

@BenPearlKahan См. Ответ пользователя1129884. Редактировать не было, когда я ответил, извините. – TheFrozenOne

Спасибо, это помогло мне разобраться! – Ben

Ваш h1 тег имеет position: absolute; right:0, что означает, что она будет оказана в крайнем правом конце контейнера, который является именно то, что происходит. Если я правильно понимаю, ваша проблема заключается в том, что вы также хотите учитывать заполнение контейнера, и в этом случае вы должны использовать right: 60px; (так как заполнение контейнера составляет 60 пикселей). В качестве альтернативы вы можете использовать float:right; вместо абсолютного позиционирования, хотя насколько хорошо это будет работать, также зависит от остальной части вашей разметки.

источник

2015-07-14 08:10:16 Christina

Элемент с изображением iPad имеет 'position: absolute;' и 'left: 0;' поэтому почему это учитывает отступы? – Ben

@BenPearlKahan iPAD получил 'display: absolute;' not 'position: absolute;' поэтому, также обязательно измените это, это недопустимый CSS – Cheshire

вы могли бы использовать право: 60px (контейнеры набивка-вправо), или вы можете создать еще одну оболочку, внутри первого контейнера с позиции относительной

источник

2015-07-14 08:11:12 DMande

положение: абсолютный элемент h1 перелив право

ответ

Смежные вопросы