Absolute Positionierung und dem übergeordneten element
Ich habe immer gehört, dass, wenn man absolute Positionierung, dass das element, das Sie wollen, zu handeln, als seine Eltern braucht, um eine position
von relative
.
Ich versuche zu bauen, ein CSS-dropdown-Menü und ich war kämpfen, um das dropdown-Menü Elemente, die Strecke über die Breite der Hauptmenü-Punkt, wenn ich hatte seine übergeordnete element, ich wollte, es zu verwenden, legen Sie als relative
; der text in der drop-down-Menü die Elemente würden nur wickeln.
Also schaute ich anderen Beispiel in den Menüs zu sehen, wie Sie es Tat, und eine, die ich fand, war nicht einmal mit einem übergeordneten Elemente mit ein position
von relative
obwohl Sie waren mit absoluter Positionierung, wie ich war.
Dass Beispiel ist hier: http://purecssmenu.com/
Also versuchte ich das entfernen meiner relative
Positionierung und bingo - mein problem ging Weg. Aber jetzt bin ich mit absoluter Positionierung, ohne dass es die Eltern mit relative
Positionierung, Sie sind ganz eingestellt, um static
.
So Frage ich mich, wie das macht Sinn - ohne relative
Eltern wäre es nicht zurückgreifen, um das browser-Fenster?
Wenn es sein muss, hier ist mein HTML:
<div class="navWrapper">
<div class="left"></div>
<div class="nav">
<ul>
<li class="home"><a href="/">Home</a></li>
<li class="spacer"></li>
<li class="about"><a href="about_us/">About Us</a></li>
<li class="spacer"></li>
<li class="trademark"><a href="freetrademarksearch/">Free Trademark Search</a></li>
<li class="spacer"></li>
<li class="services">
<a href="services/">Services</a>
<ul class="sub">
<li><a href="">Trademark Search</a></li>
<li><a href="">Prepare & File Trademark</a></li>
<li><a href="">Trademark Infringement</a></li>
</ul>
</li>
<li class="spacer"></li>
<li class="testimonials"><a href="testimonials/">Testimonials</a></li>
<li class="spacer"></li>
<li class="more"><a href="javascript:void(0);">More Information</a></li>
<li class="spacer"></li>
<li class="contact"><a href="contact-us/">Contact Us</a></li>
</ul>
<div class="contentClear"></div>
</div>
<!-- Nav Ends -->
<div class="right"></div>
</div>
<!-- Nav Wrapper Ends -->
CSS:
#header .navWrapper {
width: 1004px;
}
#header .navWrapper .left {
float: left;
width: 4px;
min-width: 4px;
height: 47px;
min-height: 47px;
background: url('../images/nav-left-bg.png') left top no-repeat;
}
#header .navWrapper .nav {
float: left;
width: 994px;
border-top: 1px solid #e0d0b4;
border-left: 1px solid #e0d0b4;
border-right: 1px solid #e0d0b4;
border-bottom: 1px solid #e8dcc8;
background: url('../images/nav-button-bg.png') left top repeat-x;
}
#header .navWrapper .nav ul {
margin: 0 1px;
display: block;
}
#header .navWrapper .nav li {
float: left;
display: block;
height: 45px;
font-family: OpenSansBold, Arial;
font-size: 16px;
line-height: 2.9;
text-align: center;
color: #646464;
}
#header .navWrapper .nav li.spacer {
width: 2px;
min-width: 2px;
height: 45px;
min-height: 45px;
background: url('../images/nav-button-spacer-bg.png') left top no-repeat;
}
#header .navWrapper .nav li a,
#header .navWrapper .nav li a:visited
{
display: block;
height: 45px;
padding: 0 20px;
color: #646464;
text-decoration: none;
}
#header .navWrapper .nav li a:hover,
#header .navWrapper .nav li a:active,
#header .navWrapper .nav li a:focus
{
color: #fff;
background: url('../images/nav-button-bg.png') left bottom repeat-x;
}
#header .navWrapper .nav li.home {
max-width: 86px;
text-indent: -1px;
}
#header .navWrapper .nav li ul.sub {
position: absolute;
}
#header .navWrapper .nav li ul.sub li {
float: none;
display: block;
font-family: OpenSansSemibold, Arial;
font-size: 14px;
line-height: 2.3;
height: auto;
text-align: center;
background-color: #f4771d;
color: #fff;
}
#header .navWrapper .nav li ul.sub li a,
#header .navWrapper .nav li ul.sub li a
{
color: #fff;
height: auto;
}
#header .navWrapper .nav li ul.sub li a:hover,
#header .navWrapper .nav li ul.sub li a:focus,
#header .navWrapper .nav li ul.sub li a:active
{
background: #d66627;
}
#header .navWrapper .right {
float: right;
width: 4px;
min-width: 4px;
height: 47px;
min-height: 47px;
background: url('../images/nav-right-bg.png') left top no-repeat;
}
- Bitte Lesen Sie meine neuesten update, das zeigt, wie Sie sehen können, wie purecssmenu.com, ist die Anwendung
position:relative
zu den übergeordneten<ul>
auf:hover
- Ok, ich sehe es, aber ich denke, du meinst das übergeordnete
<li>
, nicht<ul>
. 🙂 - Ich sehe. Das ist eine Arbeit für Sie da, obwohl Sie festgelegt haben
position:absolute
auf der Liste, haben Sie nicht definiert, jede dertop
,left
,bottom
oderright
Eigenschaften. Die Eigenschaften nicht nur default auf 0. Wenn wedertop
nochbottom
angegeben ist, wird das element vertikal positioniert, wo Sie sonst aufgestellt werden, waren es immer noch ein Teil der Strömung. Gleiches gilt fürleft
undright
und horizontale Positionierung. Versuchen Sie, jede dieser Eigenschaften auf 0px, und du wirst sehen was ich meine. - ...also in deinem Fall, die Einstellung
position:absolute
ist notwendig, weil es entfernt das sub-Menü aus dem flow, mit dem der container li, die nicht über eine bestimmte Breite, um die Breite berechnet wird, indem der text am oberen Rand des Menüs. In der Erwägung, dass, wenn Sie hatteposition:relative
auf der sub-Liste, die Breite zwingen würde, die mit li zu erweitern, wodurch die "Kontaktieren Sie Uns item fallen zu lassen, um die nächste Zeile. - OK cool, danke für die Erklärung. 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es fällt zurück auf die nächste Vorfahren element, position, definiert als
relative
,absolute
oderfixed
- nicht nurrelative
, aber einen anderen Wert alsstatic
(Standard).In der Regel wollen Sie die position der Artikel absolut nach einem raster aufgebaut, durch seine Eltern. Manchmal ist es jedoch sinnvoll ist, positionierte Sie auf einem raster aufgebaut, durch ein höheres element.
Beispiel:
HTML
CSS
In diesem Fall, div3, wird aufgestellt all der Weg auf der linken Seite & unten div1 -- sein Großvater -- weil seinen unmittelbaren Eltern (div2) auf den Standardwert
position:static
, und so nicht zu schaffen, als eine absolute Positionierung Rahmen/Gitter für seine Kinder. Aber div3 wird nicht (unbedingt) gehen den ganzen Weg auf der linken Seite des Ansichtsfensters oder der Seite Körper, weil die nächst höhere element (div1) auf position definiert als die relative.UPDATE
Im Fall, den Sie zur Verfügung gestellt (http://purecssmenu.com/),, die position:relative Erklärung, angewendet auf die :hover pseudo-Klasse, so dass Sie nicht sehen, es sofort in die Stile aufgelistet, die für Google Developer Tools oder Firebug.
Können Sie inspizieren diese in der Google-Entwickler-tools, indem Sie den übergeordneten element, dann in der rechten Seite des "Styles" - panel, klicken Sie auf das "Toggle Element State" - Taste (sieht aus wie ein Kasten mit gepunktetem Rand und einem Pfeil in es), dann aktivieren Sie das Kontrollkästchen neben ":hover". Ich bin mir sicher, dass Firebug hat etwas ähnliches.
Sehen Sie, dass diese Erklärung zu der Liste Hinzugefügt:
Dies funktioniert, weil, wenn Sie nicht schweben auf der übergeordneten
<li>
sub-Menü<ul>
ist verborgen mitdisplay:none
, es ist also egal wo es positioniert ist.UL
habenstatic
Positionierung.ul.cssMenu li:hover { position: relative; }
relative
Einstellung in meiner CSS-wie man oben sehen kann aber mein Menü gut zeigt. Wenn ichrelative
zu den übergeordneten<li>
wie die Seite heißt es umschließt den text, wenn ich es nur aufhover
dann packt es der text auf hover. Es ist komisch. Denke, ich werde es hochladen, so dass Sie sehen können.white-space: nowrap
; aber ich wusste immer noch nicht benutzen müssenrelative
an alle, die Sie hier sehen können: condorstudios.com/stuff/tempAnderen Hinweis auf die nächsten Vorfahren, wenn ein element wird positioniert.
Drei Jahre später, nach der OP, CSS3-Eigenschaften, wie transformieren Sie von mehr Menschen genutzt wird, die implizit erstellt eine neue mit block, zwingt ein element, um
position: relative/absolute;
So stellen Sie sicher Vermittler übergeordnete Elemente haben keine Auswirkungen in die Positionierung der Kind-element, müssen Sie überprüfen, es hat
position: static
und keinetransforms
gesetzt.Beispiel