CSS Child Absolute Inhalte überlappen Eltern Inhalt

Question

Ich habe eine div, die relativ positioniert ist. Innerhalb dieses div habe ich Inhalt und dann ein Tag, das absolut positioniert ist. Das Container-Div-Element wird so erweitert, dass es dem gesamten Inhalt entspricht. Das absolute Div wird jedoch über den anderen Inhalt ausgeführt, statt dass das Div-Element erweitert wird, um beide zu berücksichtigen. Das Problem tritt auf, weil die Website reaktionsschnell ist und ich möchte, dass die Links über mehrere divs hinweg ausgerichtet sind. Jeder Rat würde geschätzt werden.

.container { 
 
    position: relative; 
 
\t width:100%; 
 
    } 
 

 
.child { 
 
    width:90%; 
 
    margin:15px 0; 
 
    height:auto; 
 
    overflow:auto; 
 
    } 
 

 
.child a { 
 
    background: #e16d2a; 
 
    border: 1px solid #e16d2a; 
 
    color: #fff; 
 
    display: inline-block; 
 
    padding: 5px 15px; 
 
    position: absolute; 
 
\t bottom:10px; 
 
}

<div class="container"> 
 
    <div class="child"> 
 
    Curabitur vel feugiat neque, at molestie sem. Ut maximus blandit eros non cursus. Praesent at hendrerit ante. Phasellus volutpat nisl a ante porttitor consequat. Morbi commodo blandit mi, et dapibus mi cursus at. Sed ultricies at tortor a gravida. Proin dictum eleifend pulvinar. Etiam non nisl vel sapien ornare dignissim ornare eu quam. Maecenas lacinia, dui a aliquam molestie, nisl lorem ornare leo, laoreet ornare turpis neque sed elit. Curabitur ornare mauris id felis sollicitudin, sit amet viverra sem pulvinar. Proin porttitor pretium tortor, in aliquet risus auctor in. Nulla in arcu nec est tincidunt ornare. Donec tempor, tellus quis congue fermentum, massa ligula ultricies ligula, eu lobortis ipsum diam vitae tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id metus a purus interdum efficitur et id arcu. Morbi turpis erat, efficitur id felis et, eleifend ultricies tortor. 
 
    <a href="#">Link here</a> 
 
    </div> 
 
</div>

Answer 1

eine allgegenwärtige Polsterung an der Unterseite des Aufnahmeelements hinzufügen, die für die absolute positionierten Elementen Raum aufnimmt.

Um die Links auch über mehrere divs hinweg zu verbinden, benutze ich die Technik, sie auf display: table-cell zu setzen, damit die kleineren divs die Höhe des höchsten div teilen.

.container { 
 
    position: relative; 
 
\t width:100%; 
 
    } 
 

 
.child { 
 
    width:90%; 
 
    margin:15px 0; 
 
    height:auto; 
 
    overflow:auto; 
 
    padding-bottom: 50px; 
 
    } 
 

 
.child a { 
 
    background: #e16d2a; 
 
    border: 1px solid #e16d2a; 
 
    color: #fff; 
 
    display: inline-block; 
 
    padding: 5px 15px; 
 
    position: absolute; 
 
\t bottom:10px; 
 
}

<div class="container"> 
 
    <div class="child"> 
 
    Curabitur vel feugiat neque, at molestie sem. Ut maximus blandit eros non cursus. Praesent at hendrerit ante. Phasellus volutpat nisl a ante porttitor consequat. Morbi commodo blandit mi, et dapibus mi cursus at. Sed ultricies at tortor a gravida. Proin dictum eleifend pulvinar. Etiam non nisl vel sapien ornare dignissim ornare eu quam. Maecenas lacinia, dui a aliquam molestie, nisl lorem ornare leo, laoreet ornare turpis neque sed elit. Curabitur ornare mauris id felis sollicitudin, sit amet viverra sem pulvinar. Proin porttitor pretium tortor, in aliquet risus auctor in. Nulla in arcu nec est tincidunt ornare. Donec tempor, tellus quis congue fermentum, massa ligula ultricies ligula, eu lobortis ipsum diam vitae tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id metus a purus interdum efficitur et id arcu. Morbi turpis erat, efficitur id felis et, eleifend ultricies tortor. 
 
    <a href="#">Link here</a> 
 
    </div> 
 
</div>

Answer 2

Löschposition ein

.child a { 
    background: #e16d2a; 
    border: 1px solid #e16d2a; 
    color: #fff; 
    display: inline-block; 
    padding: 5px 15px; 
    bottom:10px; 
} 

wenn Sie wollen, zeigen auf Kind absolute dann am unteren Anzeigeblock mit einer maximalen Breite

.child a { 
    background: #e16d2a; 
    border: 1px solid #e16d2a; 
    color: #fff; 
    display: block; 
    padding: 5px 15px; 
    max-width: 100px; 
    bottom:10px; 
}