不使任何重叠的绝对 div

Question

我有一个绝对的div，在全屏上看起来不错。

在屏幕调整大小时，绝对div 重叠<p>。

如何确保无论屏幕尺寸如何，div 都不会重叠任何内容(或重叠(，并且每个元素的间距约为 15px？

p {
color: #333333;
font-family: "AvenirNextLTW01-Regular", Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5em;
margin: 0 0 1.5em;
}

<div class="quote-block" style="position: relative; margin-bottom: 60px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png?t=1528796131649" style="width: 58px;">
<div style="position: absolute; top: 5px; left: 70px;" class="quotation">
<p style="font-family: AvenirLight; color: #74818a; font-size: 28px; line-height: 28px; font-style: italic;">"As a technology buyer, when I am selecting between potential technology solution providers, I ask myself not ‘ if’, but ‘when’, we run into challenges, which solution provider do I most want to be resolving the issues with?"</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 1

为什么使用绝对/相对div 来创建此布局？

尝试使用flex，就像我在下面的代码片段中所做的那样。

p {
color: #333333;
font-family: "AvenirNextLTW01-Regular", Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5em;
margin: 0 0 1.5em;
}
.quote-block {
display: flex;
align-items: flex-start;
}

<div class="quote-block" style=""><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png?t=1528796131649" style="width: 58px;">
<div class="quotation">
<p style="margin-left: 20px;font-family: AvenirLight; color: #74818a; font-size: 28px; line-height: 28px; font-style: italic;">"As a technology buyer, when I am selecting between potential technology solution providers, I ask myself not ‘ if’, but ‘when’, we run into challenges, which solution provider do I most want to be resolving the issues with?"</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 2

试试这个。

p {
color: #333333;
font-family: "AvenirNextLTW01-Regular", Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5em;
margin: 0 0 1.5em;
}
.quotation:before{
background:url("https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png?t=1528796131649") no-repeat left top;
width:79px;
height:58px;
left:0;
position:absolute;
content:"";      
}
.quotation{
position:relative;
padding-left:100px;
}

<div class="quote-block" style="position: relative; margin-bottom: 60px;">
<div class="quotation">
<p style="font-family: AvenirLight; color: #74818a; font-size: 28px; line-height: 28px; font-style: italic;">"As a technology buyer, when I am selecting between potential technology solution providers, I ask myself not ‘ if’, but ‘when’, we run into challenges, which solution provider do I most want to be resolving the issues with?"</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>