CSS定位问题（3）：相对定位，绝对定位_html/css_WEB-ITnose
引子：
开始的时候我想先要解决一个问题，怎么设置一个div盒子撑满整个屏幕？
看下面的html代码：
<body> <div id="father-body"> <div class="item1"></div> </div></body>
实现方法一：
html, body,#father-body{ height:100%; width:100%; background-color:#123456; }这里主要解释下%(百分号)在CSS中使用的问题。% 主要是在父级元素或者是祖先元素定义了固定的width 和height 的时候才可以使用（或者说使用的时候才会有效果）。
实现方法二：
#father-body{ position:fixed; width:100%; height:100%; background-color:#123456; }这里为#father-body 设置position属性，触发自身的BFC。当对自身使用width 和 height的时候才可以生效。
position的fixed值的含义：
对象脱离常规流，使用 top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
position属性的几个值的概念：
1.相对定位
有了以上的定义，来看一段代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; /*top:40px; left:40px;*/ margin:40px 0 0 40px; } </style></head><body> <div> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div></body></html>效果如下图：
当我们使用top right bottom left 这样的属性的时候，CSS代码如下：
<style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; top:40px; left:40px; /*margin:40px 0 0 40px;*/ } </style>可以看到的效果图如下图：
到这里可以验证当使用top right bottom left （这四个属性可以设置具体的像素数也可以设置百分比）这样属性改变元素的位置的时候，不会影响其他元素的位置。而使用margin 这样的属性改变元素的位置会影响其他元素的位置。
示意图如下（图片来自W3CSchool）：
2.绝对定位
看下面的一段代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin:20px;} #body-div{ padding:15px; background-color:#a0c8ff; border:1px solid #000000; } #body-div div{ padding:10px; background-color:#fff0ac; border:1px solid #000000; } </style></head><body> <div id="body-div"> <div class="item1">Box-1</div> <div class="item2">Box-2</div> <div class="item3">Box-3</div> </div></body></html>效果图如下：
我们为Box-2设置绝对定位属性
.item2{ position:absolute; }此时Box-2脱离文档流，效果如下：
这个时候Box-3的位置会占据之前Box-2的位置。且Box-2和Box-3的左边框会重合。且盒子的宽度会根据盒子内部的元素自适应。
当盒子设置了绝对定位但是没有使用top right bottom left设置盒子的偏移量的时候，它仍会占据原先的位置。
那么当设置top right bottom left这些属性的时候会是什么效果呢？
设置下面的代码：
.item2{ position:absolute; top:0; right:0; }效果如下图：
那么当我们把直接父级元素设置为已定位的元素会怎么样呢？
由上可以得出两个结论：
1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移（定位）。如果没有已经定位的祖先元素，那么就会以浏览器窗口为基准进行定位。2.决对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响。其它的盒子好像就当这个盒子（绝对定位的盒子）不存在一样。
3.z-index属性
z-index属性用于调整定位时重叠块的上下位置，与它的名称一样，如果页面为x-y轴，则垂直于页面的方向为z轴。z-index大的页面位于其值小的的上面。
看下面的代码：
.item1{ position:relative; z-index:3; } .item2{ position:absolute; top:0; right:0; z-index:1; }
常见定位拓展：
以下的代码我都亲测过，均可以达到效果，就不在展示效果图（如果对代码有疑问可以留言）：
1.水平居中
1.1行内元素的水平居中
/*行内元素水平居中*/ #body-div{ text-align:center; }
/*块级元素水平居中*/ #body-div{ margin:0 auto; }
/*多个块级元素水平居中*/ #body-div{ text-align:center; } ##body-div-container{ display:inline-block; }2.水平垂直居中
2.1已知宽度高度的垂直水平居中
/*已知高度和宽度的水平垂直居中*/ #body-div{ position:relative; } #body-div-container{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; }
/*未知高度和宽度的水平垂直居中*/ #body-div{ position:relative; } ##body-div-container{ position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; }
#body-div{ display:table-cell; text-align:center; vertical-align:middle; } ##body-div-container{ }
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1359
52
Unterbricht die Sticky-Positionierung den Dokumentenfluss?
Feb 20, 2024 pm 05:24 PM
Unterbricht die Sticky-Positionierung den Dokumentenfluss? In der Webentwicklung ist das Layout ein sehr wichtiges Thema. Unter diesen ist die Positionierung eine der am häufigsten verwendeten Layouttechniken. In CSS gibt es drei gängige Positionierungsmethoden: statische Positionierung, relative Positionierung und absolute Positionierung. Zusätzlich zu diesen drei Positionierungsmethoden gibt es noch eine speziellere Positionierungsmethode, nämlich die Sticky-Positionierung. Unterbricht die Sticky-Positionierung also den Dokumentenfluss? Lassen Sie uns dies im Folgenden ausführlich besprechen und einige Codebeispiele bereitstellen, um das Verständnis zu erleichtern. Zuerst müssen wir verstehen, was Dokumentenfluss ist
So platzieren Sie das Bild mit CSS in der Mitte
Apr 25, 2024 am 11:51 AM
Es gibt drei Hauptmethoden, um ein Bild in CSS zu zentrieren: mit display: block; und margin: 0 auto;. Verwenden Sie das Flexbox-Layout oder das Rasterlayout und stellen Sie „Align-Items“ oder „Justify-Content“ auf „Center“ ein. Verwenden Sie die absolute Positionierung, setzen Sie oben und links auf 50 % und wenden Sie transform an: translator(-50 %, -50 %);.
So positionieren Sie Elemente in CSS
Apr 26, 2024 am 10:24 AM
Es gibt vier Methoden zur Positionierung von CSS-Elementen: statische, relative, absolute und feste Positionierung. Die statische Positionierung ist die Standardeinstellung und das Element wird von den Positionierungsregeln nicht beeinflusst. Durch die relative Positionierung wird ein Element relativ zu sich selbst verschoben, ohne den Dokumentfluss zu beeinträchtigen. Bei der absoluten Positionierung wird ein Element aus dem Dokumentfluss entfernt und relativ zu seinen Vorgängerelementen positioniert. Durch die feste Positionierung wird ein Element relativ zum Ansichtsfenster positioniert, sodass es immer an derselben Position auf dem Bildschirm bleibt.
Bottom-Attributsyntax in CSS
Feb 21, 2024 pm 03:30 PM
Syntax und Codebeispiele für das Bottom-Attribut in CSS In CSS wird das Bottom-Attribut verwendet, um den Abstand zwischen einem Element und dem Boden des Containers anzugeben. Es steuert die Position eines Elements relativ zum unteren Rand seines übergeordneten Elements. Die Syntax des unteren Attributs lautet wie folgt: element{bottom:value;} wobei element das Element darstellt, auf das der Stil angewendet werden soll, und value den festzulegenden unteren Wert darstellt. Der Wert kann ein bestimmter Längenwert sein, z. B. Pixel
So zentrieren Sie die Box in HTML5
Apr 05, 2024 pm 12:27 PM
Um die Box in HTML5 zu zentrieren, gibt es die folgenden Methoden: horizontale Zentrierung: text-align: centermargin: autodisplay: flexy-content: center; ); Position: absolut; links: 50 %; transformieren (-50 %; -50 %);
Was ist Layout-Layout?
Feb 24, 2024 pm 03:03 PM
Unter Layout versteht man eine im Webdesign verwendete Schriftsatzmethode, um Webseitenelemente nach bestimmten Regeln und Strukturen anzuordnen und anzuzeigen. Durch ein angemessenes Layout kann die Webseite schöner und übersichtlicher gestaltet werden und eine gute Benutzererfahrung erzielt werden. Bei der Front-End-Entwicklung stehen viele Layoutmethoden zur Auswahl, z. B. traditionelles Tabellenlayout, schwebendes Layout, Positionierungslayout usw. Mit der Förderung von HTML5 und CSS3 sind jedoch moderne responsive Layout-Technologien wie das Flexbox-Layout und das Grid-Layout entstanden
Ein genauerer Blick auf die Vorteile und Grenzen der absoluten Positionierung
Jan 23, 2024 am 10:20 AM
Absolute Positionierung (AbsolutePositioning) ist eine häufig verwendete Positionierungsmethode in CSS. Sie führt das Layout durch, indem sie den Positionsversatz eines Elements relativ zu seinem nächstgelegenen positionierten Vorgängerelement angibt. Bei der Verwendung der absoluten Positionierung müssen wir deren Vorteile und Grenzen verstehen und konkrete Codebeispiele verwenden, um unser Verständnis zu vertiefen. Einer der Vorteile der absoluten Positionierung besteht zunächst darin, dass Sie die vollständige Kontrolle über die Position Ihres Elements haben. Im Vergleich zu anderen Layoutmethoden kann die absolute Positionierung Elemente überall auf der Seite genau positionieren, ohne durch das Dokument eingeschränkt zu werden.
So passen Sie die Position von Komponenten im Bootstrap an
Apr 05, 2024 am 03:00 AM
Bootstrap bietet verschiedene Möglichkeiten, die Position von Komponenten anzupassen: Offset-Klasse: Horizontal versetzte Komponenten. Hilfsklasse: Komponentenausrichtung anpassen. Rastersystem: Steuert die Anzahl der Spalten, die die Komponente im Raster einnimmt. Inline-Elemente: Erstellen Sie schwebende Layouts. Absolute Positionierung: Verschiebt eine Komponente aus ihrem regulären Fluss und positioniert sie an einer beliebigen Stelle auf der Seite.
