CSS的绝对定位_html/css_WEB-ITnose
CSS的绝对定位：
一.基本概念:
如果说相对定位没有脱离文档流，相对于对象本身进行偏移有点拖泥带水的话，那么绝对定位绝对是快刀斩乱麻，因为绝对定位可以使一个对象脱离正常的文档流，好像是漂浮在正常文档流的上空,并相对于包含此对象的元素进行定位，当然这个定位相对元素在不同的情况下也有所不同。
二.如何将一个元素设置为绝对定位:
为对象添加如下属性即可将对象设置为绝对定位:
position:absolute; 或者 position:fixed
三.定位参考对象:
可以使用top属性和left属性设置绝对定位对象的偏移量。
绝对定位虽然脱离了文档流，但是也需要有定位的参考对象，不过在不同的情况下参考对象也是不同。
1.如果没有设置top或者left属性值，那么相应方位的定位参考对象就是此对象的一级父元素，代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS的绝对定位-蚂蚁部落</title> <style type="text/css"> body { margin:20px; } #grandfather { width:330px; height:300px; background-color:#F90; } #father { width:200px; height:200px; background-color:green; margin-left:50px; } #children { width:100px; height:100px; background-color:red; float:right; } #inner { width:50px; height:50px; background-color:blue; position:absolute; top:10px; } </style> </head> <body> <div id="grandfather"> <div id="father"> <div id="children"> <div id="inner"></div> </div> </div> </div> </body> </html>
以上代码中，由于inner元素采用绝对定位，并且没有设置left属性值，所以在水平方位的定位参考对象就是inner元素的一级父元素children。当然如果没有设置top属性值，那么垂直方位的定位参考对象也是children。
2.如果设置了left或者top属性值情况:
1).如果祖先元素中有采用定位的，那么此对象的相应方位的定位参考对象就是此祖先元素，如果祖先元素没有采用定位的，那么相应方位的上的定位参考对象就是浏览器客户区，代码实例如下:
实例一:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS的绝对定位-蚂蚁部落</title> <style type="text/css"> body { margin:20px; } #grandfather { width:330px; height:300px; background-color:#F90; } #father { width:200px; height:200px; background-color:green; margin-left:50px; position:relative; } #children { width:100px; height:100px; background-color:red; float:right; } #inner { width:50px; height:50px; background-color:blue; position:absolute; left:10px; top:10px; } </style> </head> <body> <div id="grandfather"> <div id="father"> <div id="children"> <div id="inner"></div> </div> </div> </div> </body> </html>以上代码，inner元素采用绝对定位，并且它的祖先元素father采用相对定位，那么它的定位参考对象就是father。
实例二:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS的绝对定位-蚂蚁部落</title> <style type="text/css"> body { margin:20px; } #grandfather { width:330px; height:300px; background-color:#F90; } #father { width:200px; height:200px; background-color:green; margin-left:50px; } #children { width:100px; height:100px; background-color:red; float:right; } #inner { width:50px; height:50px; background-color:blue; position:absolute; top:10px; } </style> </head> <body> <div id="grandfather"> <div id="father"> <div id="children"> <div id="inner"></div> </div> </div> </div> </body> </html>
以上代码中，inner元素采用绝对定位，并且它的祖先元素没有采用定位的，那么垂直方位的定位参考对象就是窗口，由于没有设置left属性值，那么水平方位的定位参考对象就是它的一级父元素children。
四.绝对定位元素脱离文档流:
在开头已经提到过，绝对定位能够使元素脱离文档流，那么它周边文档流中的元素就能够占据此元素没有脱离文档流时的位置。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS的绝对定位-蚂蚁部落</title> <style type="text/css"> div { text-align:center; line-height:100px; } .father { width:400px; height:400px; background-color:green; margin:50px; } .first { width:100px; height:100px; background-color:red; position:absolute; } .second { width:120px; height:120px; background-color:blue; } </style> </head> <body> <div class="father"> <div class="first">first</div> <div class="second">second</div> </div> </body> </html>
在以上代码中，由于first元素脱离文档流，所以second元素能够占据原来first元素本来应该占据的位置。
特别说明:定位元素经常与z-index属性一起使用，具体可以参阅CSS的z-index属性用法详解
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
1377
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?
Mar 12, 2025 pm 04:05 PM
Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
