Ich habe 3 DIVs, die in einem Container verpackt sind. Ich musste sie in den Behälter wickeln, um sie auf meiner Seite zu zentrieren, so wie ich sie haben wollte. Innerhalb dieser 3 DIVS sind DIV-Header, um Titelleisten für jeden DIV zu erstellen. Die DIV-Header der Titelleiste sind absolut positioniert, sodass sie sich über die obersten DIVs erstrecken, in denen sie sich befinden. Das funktioniert einwandfrei. Aber sobald ich die 3 DIVS in den Container lege, werden die Header-DIVs zu Kindern für den Container und beginnen, sich über sie auszubreiten, anstatt ihre jeweiligen DIVs. Gibt es eine Möglichkeit, sie zurückzubringen?Wie stelle ich ein DIV so ein, dass es in einem anderen spezifischen DIV absolut ist?
JSFIDDLE: https://jsfiddle.net/mh2ez7x9/2/
.main {
border: 2px solid red;
position: relative;
width: 740px;
right: 0;
left: 0;
top: 220px;
margin: 0 auto;
}
.update {
position: none;
display: inline-block;
background-color: #474747;
width: 700px;
height: 200px;
padding: 20px;
padding-top: 50px;
border: 1px solid black;
border-radius: 5px;
left: 280px;
top: 220px;
color: white;
font-size: 12pt;
text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
font-family: 'Muli', sans-serif;
box-shadow: 5px 5px 10px #000000;
z-index: 1;
}
.newmembers {
position: none;
display: inline-block;
margin-top: 10px;
background-color: #474747;
width: 350px;
height: 200px;
padding: 20px;
padding-top: 50px;
border: 1px solid black;
border-radius: 5px;
left: 280px;
top: 500px;
color: white;
font-size: 12pt;
text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
font-family: 'Muli', sans-serif;
box-shadow: 5px 5px 10px #000000;
z-index: 1;
}
.latest {
position: none;
display: inline-block;
margin-top: 10px;
background-color: #474747;
width: 300px;
height: 200px;
padding: 20px;
padding-top: 50px;
border: 1px solid black;
border-radius: 5px;
left: 680px;
top: 500px;
color: white;
font-size: 12pt;
text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
font-family: 'Muli', sans-serif;
box-shadow: 5px 5px 10px #000000;
z-index: 1;
}
.miniheaderA {
position: absolute;
right: 0;
left: 0;
top: 0;
border: 2px none red;
padding: 5px;
height: 20px;
background-image: url('../images/redboxtext.png');
box-shadow: 0px 2px 5px #000000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.miniheaderM {
position: absolute;
right: 0;
left: 0;
top: 0;
border: 2px none red;
padding: 5px;
height: 20px;
background-image: url('../images/orangeboxtext.png');
box-shadow: 0px 2px 5px #000000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.miniheaderU {
position: absolute;
right: 0;
left: 0;
top: 0;
border: 2px none red;
padding: 5px;
height: 20px;
background-image: url('../images/blueboxtext.png');
box-shadow: 0px 2px 5px #000000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}<div class="main">
<div class="update">
<div class="miniheaderU">
<h3>News</h3>
</div>
Welcome to the all new website!
</div>
<td valign="top">
<div class="newmembers">
<div class="miniheaderM">
<h3>New Members</h3>
</div>
<?php echo "new members!"; ?>
</div>
<div class="latest">
<div class="miniheaderA">
<h3>Latest Content</h3>
</div>
<?php echo "new content"; ?>
</div>
</div>
Verwenden Sie 'position: relative;' auf dem Containerelement –
ok. Das hat die Header repariert, aber jetzt sind meine DIVs auf der ganzen Seite merkwürdig verschoben. Ich habe diesen Beitrag aktualisiert. – BuddyRoach
Können Sie ein JSFiddle veröffentlichen, das dieses Problem reproduziert? –