Welche Parameter können bei der absoluten Positionierung als Referenz verwendet werden?-CSS-Tutorial-php.cn

Welche Parameter können bei der absoluten Positionierung als Referenz verwendet werden?

WBOY

Freigeben： 2024-01-23 09:55:06

Original

703 Leute haben es durchsucht

Welche Parameter können bei der absoluten Positionierung als Referenz verwendet werden?

Absolute Positionierung ist eine Layoutmethode, die häufig in der Front-End-Entwicklung verwendet wird. Sie kann Elemente genau an bestimmten Positionen platzieren und dem Seitenlauf folgen, ohne dass sich die Position ändert. Bei der absoluten Positionierung müssen wir uns auf einige Parameter beziehen, um sicherzustellen, dass das Element genau an der gewünschten Stelle positioniert werden kann. In diesem Artikel werden einige häufig verwendete Parameter als Referenz vorgestellt und spezifische Codebeispiele gegeben.

1. Parameter „Links“, „Oben“, „Rechts“ und „Unten“ Bei der absoluten Positionierung geben Sie durch Festlegen der Parameter „Links“, „Oben“, „Rechts“ und „Unten“ des Elements die linke, obere, rechte und untere Position des Elements relativ zu seinem Inhalt an Element. Seitenversatz. Diese Parameter können bestimmte Pixelwerte oder Prozentwerte sein.

Codebeispiel:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

Nach dem Login kopieren

Im obigen Code wird das Boxelement 50 Pixel versetzt von der oberen linken Ecke des Containerelements positioniert, indem die linken und oberen Parameter auf 50 Pixel gesetzt werden.

2. Z-Index-Parameter

Für die absolute Positionierung können sich mehrere Elemente auf der Seite befinden. Wenn sich diese Elemente überlappen, kann der Z-Index-Parameter verwendet werden, um die Stapelreihenfolge der Elemente zu steuern. Elemente mit größeren Z-Index-Werten werden weiter vorne platziert und überdecken andere Elemente.

Codebeispiel:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box1 {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
        z-index: 1;
      }
      .box2 {
        position: absolute;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: blue;
        z-index: 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

Nach dem Login kopieren

Im obigen Code ist der Z-Indexwert des Box1-Elements 1 und der Z-Indexwert des Box2-Elements 2, sodass das Box2-Element das Box1-Element abdeckt.

3. Positionieren Sie das Positionsattribut des übergeordneten Elements. Bei der absoluten Positionierung müssen Sie auf das Positionsattribut des übergeordneten Elements achten. Wenn das Positionsattribut nicht für das positionierte übergeordnete Element festgelegt ist, wird die Position des absolut positionierten Elements relativ zum sichtbaren Bereich des Dokuments positioniert. Wenn für das positionierte übergeordnete Element das Positionsattribut festgelegt ist, wird die Position des absolut positionierten Elements relativ zum positionierten übergeordneten Element positioniert.

Codebeispiel:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box1 {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        position: absolute;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

Nach dem Login kopieren

Im obigen Code ist das positionierende übergeordnete Element der Elemente box1 und box2 das Containerelement, sodass die Elemente box1 und box2 relativ zum Containerelement positioniert sind.

Absolute Positionierung ist eine sehr verbreitete Layoutmethode in der Front-End-Entwicklung. Durch Bezugnahme auf die oben genannten Parameter können Elemente flexibel und genau positioniert werden. In der tatsächlichen Entwicklung können wir diese Parameter je nach Bedarf flexibel verwenden, um unterschiedliche Seitenlayouts zu erreichen.

Das obige ist der detaillierte Inhalt vonWelche Parameter können bei der absoluten Positionierung als Referenz verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!