段落の段落右下

Question

それぞれの段落の下に段落リンクがあります。コードbottom: 0; position: absolute;を追加すると、両方のリンクがそれぞれのdivに保存されるのではなく、一番右側のdivにまとめられます。どのようにしてリンクが右下の自分のコンテナの内部に留まるようにするには？

.header-unit { 
 
    height: 300px; 
 
    position: relative; 
 
    margin-top: 5px; 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-image: url("/images/liberty.jpg"); 
 
} 
 

 
#messageContainer { 
 
    margin-left: 200px; 
 
    /* \t padding-top: 450px; */ 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
h1 { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 2em; 
 
    line-height: 1.15; 
 
    text-transform: uppercase; 
 
} 
 

 
#knowledge, 
 
#practice { 
 
    padding: 25px; 
 
    width: 350px; 
 
    height: 300px; 
 
    display: block; 
 
    color: #fff; 
 
} 
 

 
.linksect { 
 
    bottom: 0; 
 
    right: 25px; 
 
    position: absolute; 
 
} 
 

 
#knowledge { 
 
    background: #8b8b8b; 
 
} 
 

 
#practice { 
 
    background: #554a58; 
 
} 
 

 
.indexheader { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 2em; 
 
    line-height: 1.15; 
 
    text-transform: uppercase; 
 
    color: #554a58; 
 
} 
 

 
.firmvalues { 
 
    margin-top: 50px; 
 
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> 
 
<div class="header-unit"> 
 
    <div id="messageContainer" class="w3-row"> 
 
    <div id="knowledge" class="w3-col l6"> 
 
     <h1>Knowledge. Experience. Commitment. </h1> 
 
     <p>The attorneys of ....</p> 
 
     <p class="linksect"><a href="/page/3/attorneys">Our Attorneys <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p> 
 
    </div> 
 
    <div id="practice" class="w3-col l6"> 
 
     <h1>Practice Areas</h1> 
 
     <p>Business and Commercial Law<br> Insurance Coverage and Indemnity Law<br> Medical and Dental Malpractice<br> Probate Law and Practice<br> and more...</p> 
 
     <p class="linksect"><a href="/page/2/practices">Practice Areas <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたは絶対位置の要素がからの相対になりたい祖先要素に非静的positionプロパティを追加することにより、position:absoluteのためのコンテキストを提供することができます。 position:relativeは通常、要素フローをドキュメントフローに保持するため、良い選択です。 （私は#knowledge,#practiceルールに追加していることに注意してください。）

.header-unit { 
 
    height: 300px; 
 
    position: relative; 
 
    margin-top: 5px; 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-image: url("/images/liberty.jpg"); 
 
} 
 

 
#messageContainer { 
 
    margin-left: 200px; 
 
    /* \t padding-top: 450px; */ 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
h1 { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 2em; 
 
    line-height: 1.15; 
 
    text-transform: uppercase; 
 
} 
 

 
#knowledge, 
 
#practice { 
 
    padding: 25px; 
 
    width: 350px; 
 
    height: 300px; 
 
    display: block; 
 
    color: #fff; 
 
    position: relative; 
 
} 
 

 
.linksect { 
 
    bottom: 0; 
 
    right: 25px; 
 
    position: absolute; 
 
} 
 

 
#knowledge { 
 
    background: #8b8b8b; 
 
} 
 

 
#practice { 
 
    background: #554a58; 
 
} 
 

 
.indexheader { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 2em; 
 
    line-height: 1.15; 
 
    text-transform: uppercase; 
 
    color: #554a58; 
 
} 
 

 
.firmvalues { 
 
    margin-top: 50px; 
 
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> 
 
<div class="header-unit"> 
 
    <div id="messageContainer" class="w3-row"> 
 
    <div id="knowledge" class="w3-col l6"> 
 
     <h1>Knowledge. Experience. Commitment. </h1> 
 
     <p>The attorneys of ....</p> 
 
     <p class="linksect"><a href="/page/3/attorneys">Our Attorneys <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p> 
 
    </div> 
 
    <div id="practice" class="w3-col l6"> 
 
     <h1>Practice Areas</h1> 
 
     <p>Business and Commercial Law<br> Insurance Coverage and Indemnity Law<br> Medical and Dental Malpractice<br> Probate Law and Practice<br> and more...</p> 
 
     <p class="linksect"><a href="/page/2/practices">Practice Areas <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p> 
 
    </div> 
 
    </div> 
 
</div>