段落权利

Question

我有两个div，每个div都在div的右下角有一个段落链接。当我添加代码bottom: 0; position: absolute;时，它将两个链接一起拉到最右边的div中，而不是将它们保存在自己的div中。如何设置此链接以使链接保留在其右下角的自己的容器内？

＆＃13;

＆＃13;

.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;
  /* 	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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过向您希望绝对定位元素相对的祖先元素添加非静态位置属性来为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;
  /* 	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>