613

別の div 内に 2 つの div があり、1 つの子 div を親 div の右上に配置し、もう 1 つの子 div を css を使用して親 div の下部に配置します。つまり、2 つの子 div で絶対配置を使用したいのですが、ページではなく親 div に対して相対的に配置します。これどうやってするの？

サンプル HTML:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>
4

5 に答える 5

1094 
#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

これは、「 、、をposition: absolute使用して、またはを持つ最も近い祖先との関係で自分自身を配置する」などの意味があるため機能します。toprightbottomleftposition: absoluteposition: relative

そこで、#fatherhaveを作成position: relativeし、子に haveを作成し、 and をposition: absolute使用topしbottomて子を配置します。

于 2012-05-07T18:44:11.647 に答える
34 
div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}
于 2012-05-07T18:43:49.180 に答える
3

スティッキー フローティング「戻るボタン」/「トップに戻る」ボタンが必要なユース ケース。しかし、サイド コンテンツ エリアを優先して縮小できるメイン コンテンツ エリアがあります。

position: fixed;のコンテナ内で使用position: absolute;して、より柔軟stickyでより強力な動作を得ることができます

function toggleOpen() {
  const element = document.getElementById("sideContnet");
  if (element.style.display === "none") {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
}
.container {
  display: flex;
  margin: 0 auto;
    width: 600px;
}

.contentBig {
  width: 600px;
  min-width: 66%;
  position: relative;
  
}
.contentSmall {
  width: 230px;
  min-width: 33%;
}

.absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
}

.fiexBack {
  position: fixed;
  background-color: red;
  bottom: 20px;
  padding: 5px;
}

.button {
  width: 200px;
  padding: 12px;
  background-color: coral;
  margin: 0 auto;
}
<button onclick="toggleOpen()" id="toggleSide" class="button">
  toggle open side content
</button>
<div class="container">
  <div class="contentBig">
    <div class="absolute">
      <div class="fiexBack">Back</div>
  </div>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
<p>
Curabitur auctor ipsum ac interdum accumsan. Sed quis arcu mauris. Maecenas nibh ligula, tristique rhoncus pharetra vel, blandit non lectus. Suspendisse orci felis, faucibus sit amet rhoncus eu, ullamcorper et nulla. Ut in leo eu risus dignissim tempus sed sit amet leo. Etiam pulvinar lectus tincidunt turpis viverra maximus. Donec rutrum rutrum dui sit amet congue.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
  </div>
   <div id="sideContnet" class="contentSmall">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
  </div>
</div>

完全なコード例

于 2021-06-24T09:02:28.467 に答える