Position absolut, aber relativ zum Elternteil

Question

Ich habe zwei Divs innerhalb eines anderen Divs, und ich möchte ein Child-Div oben rechts vom Parent-Div und das andere Child-Div unten vom Parent-Div mit Hilfe von CSS positionieren. D.h., ich möchte die beiden Child-Divs absolut positionieren, sie aber relativ zum Parent-Div und nicht zur Seite positionieren. Wie kann ich dies tun?

Beispiel html:

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

Answer 1

#father {
   position: relative;
}

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

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

Dies funktioniert, weil position: absolute bedeutet so viel wie "verwenden top , right , bottom , left sich in Bezug auf den nächstgelegenen Vorfahren zu positionieren, der position: absolute o position: relative ."

Wir machen also #father haben position: relative und die Kinder haben position: absolute verwenden, dann top y bottom um die Kinder zu positionieren.

Answer 2

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

Answer 3

Für den Fall, dass jemand ein untergeordnetes Referat direkt unter einem Elternteil platzieren möchte

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

Arbeitsfähige Demo Codepen

Answer 4

Wenn Sie dem Elternteil keine Position zuweisen, nimmt er standardmäßig static . Wenn Sie diesen Unterschied verstehen wollen, sehen Sie sich dieses Beispiel an

Beispiel 1::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

Hier hat die übergeordnete Klasse keine Position, so dass das Element entsprechend dem Körper platziert wird.

Beispiel 2::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

In diesem Beispiel hat das übergeordnete Element eine relative Position, so dass die Elemente innerhalb des relativen übergeordneten Elements absolut positioniert sind.

Answer 5

In einem Anwendungsfall, in dem Sie eine schwebende Schaltfläche "Zurück" / "Zurück zum Anfang" benötigen. Aber Sie haben den Hauptinhaltsbereich, der zu Gunsten des Seiteninhaltsbereichs schrumpfen kann

Sie können verwenden position: fixed; in einem Behälter mit position: absolute; um ein flexibleres Verhalten zu erhalten, ähnlich wie bei sticky aber stärker

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>

Vollständiges Code-Beispiel