Heim > Artikel > Web-Frontend > Layout-DIV mit Positionsattribut

Layout-DIV mit Positionsattribut

怪我咯Original: 2017-06-22 10:36:331728Durchsuche

Relative Positionierung und Absolute Positionierung

Positionierungs-Tag: Position
enthält Attribute : relativ (relativ) absolut (absolut)
1.position:relative; Wenn ein Element relativ positioniert ist, erscheint es zuerst an seiner Position. Anschließend verschieben Sie das Element „relativ“ zu seinem ursprünglichen Startpunkt, indem Sie eine vertikale oder horizontale Position festlegen. (Noch ein Punkt: Bei relativer Positionierung nimmt das Element immer noch den ursprünglichen Platz ein, unabhängig davon, ob es verschoben wird. Daher führt das Verschieben des Elements dazu, dass es andere Felder verdeckt.)

2.position:absolute ; bedeutet absolute Positionierung. Die Position wird ausgehend von der oberen linken Ecke des Browsers berechnet. Durch die absolute Positionierung wird das Element aus dem Dokumentenfluss entfernt, sodass es keinen Platz einnimmt. Elemente im normalen Dokumentenfluss werden so angeordnet, als ob absolut positionierte Elemente nicht vorhanden wären. (Da absolut positionierte Boxen nichts mit dem Dokumentenfluss zu tun haben, können sie andere Elemente auf der Seite überdecken und ihre hierarchische Reihenfolge kann über Z-Index gesteuert werden. Je höher der Z-Index, desto besser sichtbar )

3. Nachdem der übergeordnete Container die relative Positionierung und das untergeordnete Element die absolute Positionierung verwendet, ist die Position des untergeordneten Elements nicht mehr relativ zur oberen linken Ecke des Browsers. aber relativ zur oberen linken Ecke des übergeordneten Fensters

4. Die relative Positionierung und die absolute Positionierung müssen mit „oben“, „rechts“, „unten“ und „links“ verwendet werden, um die spezifische Position zu lokalisieren Vier Attribute werden erst nach der Positionierung des Elements wirksam und sind in anderen Fällen ungültig. Darüber hinaus können diese vier Attribute nur zwei benachbarte Attribute gleichzeitig verwenden. Sie können nicht gleichzeitig „oben“ und „unten“ oder gleichzeitig „links“ und „rechts“ verwenden. Das Folgende ist das relative absolute Layout mehrerer ps innerhalb eines p:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
  <head>
    <title>testp.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
    <meta http-equiv="description" content="this is my page"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    
    <script type="text/javascript">
        window.onload = function(){
            document.getElementById("myp").style.height = "200px";
        };    </script>
  </head>
  
  <body>
      关键因素：外层加position:relative,里面的p使用position: absolute，<br />
      但这种方法的问题有：外层的p必须指定具体的height，高度不能使用百分比   <!--  <p style="position:relative;width: 600px;height:500px;">
        <p style="width: 100px;height: 50px; position: absolute;right:10px;bottom: 10px"></p>
    </p> -->
    
     <p id="myp" style="position:relative;width: 100%;height:auto;">
        <p style="width: 100px;height: 50px; position: absolute;right:10px;bottom: 10px"></p>
        <p style="width: 100px;height: 50px; position: absolute;left:10px;bottom: 10px"></p>
    </p>
  </body></html>

Rendering:

Das obige ist der detaillierte Inhalt vonLayout-DIV mit Positionsattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Im CSS-Positionsattribut: der Unterschied zwischen absolut und relativNächster Artikel：Im CSS-Positionsattribut: der Unterschied zwischen absolut und relativ

In Verbindung stehende Artikel

Mehr sehen