Beschreibung der Positionierungsmethode mithilfe des Positionsattributs in CSS

In diesem Artikel wird hauptsächlich die Positionierungsverwendung des Position-Attributs in grafischem CSS vorgestellt, wobei der Schwerpunkt auf der relativen Positionierung und der absoluten Positionierung im Seitenlayout liegt Rolle von , Freunde, die es brauchen, können sich auf

beziehen. Der Positionierungsmodus in CSS legt fest, wo sich eine Box im Gesamtlayout befinden soll und welche Auswirkungen sie auf die umliegenden Boxen haben wird. Dieser Modus umfasst den regulären Dokumentenfluss, Floating und verschiedene Arten von Positionselementen.
Davon kann die CSS-Positionseigenschaft 5 Werte annehmen:
Position: absolut
Position: relativ
Position: fest
Position: statisch
Position : inherit
static ist der Standardattributwert der Position. Jedes Element, auf das position:static angewendet wird, befindet sich im regulären Dokumentenfluss. Wo es sich befindet und wie es sich auf umgebende Elemente auswirkt, wird durch das Boxmodell bestimmt.
Ein statisch positioniertes Element ignoriert alle oben, rechts, unten, links und z-Index Der vom Attribut deklarierte Wert. Damit Ihr Element diese fünf Attribute verwenden kann, müssen Sie zunächst einen dieser drei Werte auf sein Positionsattribut anwenden: absolut, relativ, fest
Elemente mit einem Positionswert von inherit und Erben Derselbe Wert, das Element erbt den Positionswert des übergeordneten Elements.

Um es später besser zu verstehen, möchte ich zunächst die DOM-Skizze dieses Beispiels zeichnen:

Ich denke, jeder kann das obige DOM-Diagramm leicht verstehen Schauen Sie sich gemeinsam die Verwendung der Position an.

Schritt eins: Position: statisch

Der Standardwert des „Position“-Attributs aller Elemente in CSS ist „statisch“, da dies nicht explizit erforderlich ist Legen Sie für jedes Element „position:static“ fest. An diesem Punkt wird sich jeder fragen: Hat dieser Attributwert keine Bedeutung? Eigentlich nein, es wird auch in CSS eine große Rolle spielen. Sehen wir uns ein Beispiel an:

Wenn beispielsweise „p#p-1“ auf beiden Seiten vorhanden ist, müssen Sie „p#p-1“ unbedingt auf Seite A positionieren Seite B, „p#p-1“ muss nicht absolut positioniert sein.

Absolute Positionierung von „p#p-1“ auf Seite A:

#p-1 {   
    position: absolute;   
   }

Wenn Sie zu diesem Zeitpunkt keine absolute Positionierung auf Seite B durchführen möchten, müssen wir dies tun Zeigen Sie es in Ihrem Stil an. Setzen Sie das Positionsattribut von „#p-1“ formelmäßig auf „statisch“ zurück

body.B #p-1 {   
    position: static;   
   }

Schritt 2: Relative Positionierungsposition: relativ

relativ wird als relative Positionierung bezeichnet. Wenn Sie den Positionswert „relativ“ für ein Element angeben, können Sie den Positionierungswert des Elements über „T-R-B-L“ festlegen (dh oben, rechts, unten, links).

Bei der Verwendung von relativ sind einige Dinge zu beachten:

Wenn das Element auf relativ gesetzt ist, wird es relativ zur Position des Elements selbst positioniert.

Nachdem das Element ist Wenn Sie es auf „relativ“ setzen, können Sie „T-R-B-L“ verwenden. Ändern Sie die aktuelle Position des Elements, aber nachdem das Element verschoben wurde, hat derselbe Punkt den ursprünglichen physischen Raum.
Nachdem das Element auf „relativ“ gesetzt ist, wenn kein „T-R-B-L“ „Einstellung vorgenommen wird, nimmt das Element keine Positionsänderungen vor.
Der erste und dritte Punkt der oben genannten drei Punkte sind relativ leicht zu verstehen, also schauen wir uns nun zum zweiten Punkt eine Beispieloperation an:

Basierend auf dem oben Gesagten „p-1“ bewegt sich um 20 Pixel nach unten; bewegt sich um 40 Pixel nach links:

#p-1 {   
     position:relative;   
     top:20px;   
     left:-40px;   
    }

Lassen Sie uns einen Blick auf den Effekt werfen:

Von den Renderings kann dies noch einmal bestätigt werden der zweite oben erwähnte Punkt. Das Element „p-1“ hat sich um 20 Pixel nach unten und 40 Pixel nach links verschoben, aber der ursprünglich vom Element eingenommene physische Raum ist weiterhin vorhanden. Darüber hinaus hat die relative Positionierung des Elements keine Auswirkungen auf andere benachbarte Elemente.

Schritt 3: Absolute Positionierung position:absolute

absolute ist der dritte Attributwert in Position. Wenn Sie „absolut“ für das Element angeben, wird das gesamte Element aus dem Float herausbewegt der Dokumentenfluss, und gleichzeitig verschwindet der eigene physische Raum des Elements. Im Gegensatz zu „relativ“, das immer noch den ursprünglichen physischen Raum hat.

Sehen wir uns ein Beispiel für die absolute Positionierung auf dem p-1a-Element an:

#p-1a {   
    position:absolute;   
    top:0;   
    rightright:0;   
    width:200px;   
   }

此时元素“p-1a”不在当初的文档流中，而且其此时定位也是相对于html来进行定位，那么我们有时候并不是需要这样的效果，哪果我们元素p-1a还想在p-1是进行绝对定位，那要怎么办呢？此时就要发挥前面第二步的“relative”作用了。

第四步：relative和absolute的结合

第二步中大家知道元素相对定位“relative”是相对于元素自身定位，而在第三步中大家知道元素绝对定位“absolute”是相对于html。但这种说法只有满足这样的条件才是正常的：“绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置，那么绝对定位的元素的参考物就是html”，这样一来，“relative”和“absolute”的结合就能起到很大的作用。

我们接下来看一个截图：

上图做为一个实例来说明“relative”和“absolute”的关系，首先上图中共有三个p放在body内，而且他们三个p的关系是“p-1>p-2>p-3”,而且在p-3有这么一个绝对定位：

.p-3 {   
    position: absolute;   
    left:0;   
    top:0;   
   }

下面分几个情况来说明上图的意思：

1、p-1与p-2都没有设置“position:relative”，此时我们的p-3绝对定位后就漂到了上图中“p-3c”的位置上；

2、现在我们在p-2元素中加设置一个“position: relative”，此时我们的p-3绝对定位后就漂到了上图中的“p-3a”的位置;

3、接下来把相对定位的设置换到p-1元素上，此时p-3绝对定位后就到了p-3b的位置。

花这么多心思，我只想说明一点：如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。这句话说起起来好像有点拗口，不知道大家能否明白我说的是什么？如果不明白大家可以参考上图或者下面这个实例效果：

回到上面的实例中，如果我们在“p-1”加一个“relative”：

#p-1 {   
    position:relative;   
   }   
   #p-1a {   
    position:absolute;   
    top:0;   
    rightright:0;   
    width:200px;   
   }

现在我们相对点不在是第三步中的body了，而是“p-1”了，大家看看与第三步的变化：

第五步：relative和absolute实现布局效果

这一步只要想演示一下使用相对定位和绝对定位实现的两例布局。在前面的基础上，p-1进行相对定位，而p-1a和p-1b进行绝对定位，从而实现两列布局的效果：

#p-1 {   
    position:relative;   
   }   
   #p-1a {   
    position:absolute;   
    top:0;   
    rightright:0;   
    width:200px;   
   }   
   #p-1b {   
    position:absolute;   
    top:0;   
    left:0;   
    width:200px;   
   }

这样的制作只是用来说明absolute的作用，如果只能实现上面的效果，可能在实际制作中并不完美，为了让其更完美一些，在这个基础上我们在来看下面这一步。

第六步：设置固定高度

为了让布局更适用一些，可以在p-1元素上设置固定高度，如：

#p-1 {   
    position:relative;   
    height:250px;   
   }   
   #p-1a {   
    position:absolute;   
    top:0;   
    rightright:0;   
    width:200px;   
   }   
   #p-1b {   
    position:absolute;   
    top:0;   
    left:0;   
    width:200px;   
   }

相比之下好一点，但我们并不知道元素内容高度将会是多少，所以在此设置一个固定高度也是我们实际中的一个死穴，个人不建议这样使用。如果为了需要，我们可以通过别的办法来实现。

第七步：float

前两步，使用绝对定位都并不是很理想，那么我们可以考虑使用float来解决。我们可以在一个元素上使用float，让元素向左或向右，而且还可以使用文本围绕在这个元素的周边（这个作用在文本围绕图片特别有用）。下面来模拟一下：

#p-1a {   
    float:left;   
    width:200px;   
   }

第八步：多列浮动

上面展示的是一个列浮动，接下来看看多列的变化：

#p-1a {   
    float:left;   
    width:150px;   
   }   
   #p-1b {   
    float:left;   
    width:150px;   
   }

浮动与绝对定位来相比，现在解决了其高度自适应的问题，但也存在一个问题，浮动也破坏了元素当初的文档流，使其父元素塌陷了，那么为了解决这个问题，我们有必要对其进行清除浮动。

第九步：清除浮动

为了让浮动元素的父元素不在处于塌陷状态下，我们需要对浮动元素进行清除浮动：

#p-1a {   
    float:left;   
    width:190px;   
   }   
   #p-1b {   
    float:left;   
    width:190px;   
   }   
   #p-1c {   
    clear:both;   
   }

Das obige ist der detaillierte Inhalt vonBeschreibung der Positionierungsmethode mithilfe des Positionsattributs in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!