2013-09-30 6 views
5

In HTML Wenn Sie die Eigenschaft position: absolute css im untergeordneten Block verwenden, wird der absolute Wert nicht vom übergeordneten Tag übernommen, sondern bezieht sich auf das gesamte Browserfenster. der Beispielcode wird unten ..wenn ich position: absolute im untergeordneten Block verwende, verweist er nicht auf den übergeordneten Block?

CSS

.parent { 
    width: 400px; 
    height: 400px; 
    border: 1px solid green; 
} 

.child { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    bottom: 0px; 
} 
+3

Warum Sie diese Frage stellen, wenn Sie bereits die Antwort wissen? Jeder, der sogar nach der grundlegendsten "position: absolute" Suchanfrage bei Google sucht, wird feststellen, dass Sie einen "relativen" Container (oder einen anderen nicht-statischen) benötigen. So wie ich es sehe, haben Sie diese Frage nur gestellt, um den Ruf des Systems zu farmen - Sie haben bereits 55 gewonnen! –

+0

@Kolink: Eine Frage zu posten, von der Sie die Antwort wissen und dann beantworten, ist in Ordnung, aber Sie haben Recht, dass dies eine wirklich grundlegende und häufig gestellte Frage ist, die mit einer einfachen Google-Suche beantwortet werden kann. – BoltClock

+0

@Kolink es scheint, das ist eine Art von Spam! –

Antwort

10
gezeigt

Wenn Sie möchten, das das Kind mit in dem übergeordneten Block anordnen nur position:relative in der CSS-Mutter

2

Der Mutterblock Bedarf hinzufügen zu haben position auf einen nicht statischen Wert gesetzt, das heißt: position: absolute, position: fixed oder position: relative.

Der von Ihnen benötigte Wert hängt von der Layout-Anwendung ab.

1
.parent { 
    width: 400px; 
    height: 400px; 
    border: 1px solid green; 
    position:relative;/*this makes all my children s position relative to me */ 
} 

.child { 
    position: absolute;/* i have an absolute position and i am relative to my parent*/ 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    bottom: 0px; 
} 

Demo: http://jsfiddle.net/pGvvq/

Markup:

<section class=parent> 
    this makes all my children s position relative to me 
    <article class=child> 
     i have an absolute position and i am relative to my parent 
    </article> 
</section> 

enter image description here

Lesen Sie mehr http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Verwandte Themen