Maison >interface Web >tutoriel CSS >Position CSS:absolueCompréhension complète de l'analyse
Position CSS:absolueCompréhension complète de l'analyse
- 高洛峰original
- 2017-03-07 13:51:071293parcourir
1. Caractéristiques du positionnement absolu
Le positionnement absolu a les mêmes caractéristiques que le flottement, c'est-à-dire l'enveloppement et la destructivité.
En termes de destructivité, le flottement détruit uniquement la hauteur de l'élément et conserve la largeur de l'élément tandis que la hauteur et la largeur des éléments positionnés de manière absolue disparaissent.
Veuillez regarder le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位的特征</title>
<style>
.box1,.box2,.box3 {
background-color: orange;
margin-bottom: 30px;
}
.absolute {
position: absolute;
}
.wraper {
display:inline-block;
margin-left: 300px;
}
.float {
float: left;
}
.box3 {
position: absolute;
}
</style>
</head>
<body>
<p class="box1">
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<p>这是普通流中的两幅图像。</p>
</p>
<p class="box2">
<img class="absolute" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<p class="wraper">
<img class="float" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
</p>
<p>左图，将第一幅图像绝对定位，其完全脱离文档流，并且覆盖在第二幅图像之上；由此看出，绝对定位的破坏性不仅让元素没有了高度，甚至没有了宽度。</p>
<p>右图，将第一幅图像左浮动，其虽然脱离了文档流，但是并没有覆盖在其他元素之上；浮动的破坏性仅仅破坏了元素的高度，而保留了元素的宽度。</p>
</p>
<p class="box3">
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<p>将容器绝对定位，体现其包裹性。</p>
</p>
</body>
</html>
2. Règles générales pour le positionnement absolu :
Lorsqu'un élément est positionné de manière absolue, il est complètement hors du flux de documents et positionné par rapport à son bloc conteneur. Un bloc contenant positionné de manière absolue est son élément ancêtre positionné le plus proche. Si l'élément ancêtre est un élément de niveau bloc, le bloc conteneur est la limite de remplissage de l'élément ancêtre, c'est-à-dire la bordure. Si l'élément ancêtre est un élément en ligne, le bloc conteneur est la limite de contenu de l'élément ancêtre, c'est-à-dire la zone de contenu. S'il n'y a pas d'élément ancêtre positionné, le bloc conteneur de l'élément est défini comme le bloc conteneur initial. Attributs de décalage : haut, droite, bas, gauche. Si un élément en position absolue n'a pas d'attribut de décalage défini, bien qu'il soit hors du flux de documents, sa position restera en place. L'attribut offset peut être négatif pour positionner l'élément en dehors du bloc conteneur. Le code est ici :<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位的一般规则</title>
<style>
body {
background-color: #ccc;
}
.container {
width:500px;
background-color: orange;
margin:20px auto 50px auto;
padding:20px;
border:2px solid red;
}
.box2 img,.box3 img,
.box4 img,.box5 img {
position: absolute;
}
.box3 img,.box4 img {
left:0;
bottom:0;
}
.box5 img {
left: -30px;
bottom: -50px;
}
.block {
position :relative;
height: 200px;
}
</style>
</head>
<body>
<p class="container">
<p class="box1">
<p>元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。绝对定位的包含块，是其最近的已定位的祖先元素。</p>
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<ul>
<li>如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。</li>
<li>如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。</li>
<li>如果没有已定位的祖先元素，元素的包含块定义为初始包含块（一个视窗大小的矩形）。</li>
</ul>
</p><!--关闭box1-->
</p><!--关闭container-->
<p class="container">
<p class="box2">
<p>不管有没有已经定位的祖先元素，只要没有偏移量，绝对定位之后，原地不动，脱离文档流。</p>
<p>下面这个已经绝对定位的图像原地没动，但是已经脱离了文档流。</p>
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
</p><!--关闭box2-->
</p><!--关闭container-->
<p class="container">
<p class="box3">
<p>没有已经定位的祖先元素，有偏移量，绝对定位之后，以初始包含块（一个视窗大小的矩形）为基准进行偏移。</p>
<p>当偏移量为left:0; buttom:0时，图像水平偏移到了初始包含块左下角（打开网页最开始的那一个视窗的左下角）。</p>
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
</p><!--关闭box3-->
</p><!--关闭container-->
<p class="container block">
<p class="box4">
<p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p>
<p>此处已经定位的祖先元素为这个图像的容器p元素，偏移量为left:0; bottom:0时，图像到了这个容器的左下角（以边框为界）。</p>
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
</p><!--关闭box4-->
</p><!--关闭container-->
<p class="container block">
<p class="box5">
<p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p>
<p>此处已经定位的祖先元素为这个图像的容器p元素，偏移量为left:-30px; bottom:-50px时，图像到了这个容器之外（以边框为界）。</p>
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
</p><!--关闭box5-->
</p><!--关闭container-->
</body>
</html>
Utilisez la marge pour ajuster la position des éléments positionnés de manière absolue
Les éléments positionnés de manière absolue, en plus d'être décalés en haut, à droite, en bas et à gauche, peuvent également être positionnés avec précision grâce aux valeurs de marge et sont plus adaptables. Exemple :<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用margin调整绝对定位元素的位置</title>
<style>
.box1,.box2,.box3 {
display: inline-block;
margin-right: 150px;
border:1px solid blue;
}
span {
background-color: red;
}
.box2 span,.box3 span {
position: absolute;
}
.meng {
margin-left: -3em;
}
.box4 {
border:1px solid red;
width: 500px;
margin: 50px auto 0 auto;
padding:20px;
}
li {
margin-bottom: 20px;
}
</style>
</head>
<body>
<p class="box1">
<span>卡哇伊</span>
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />
<span>萌萌哒</span>
</p>
<p class="box2">
<span>卡哇伊</span>
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />
<span>萌萌哒</span>
</p>
<p class="box3">
<span>卡哇伊</span>
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />
<span class="meng">萌萌哒</span>
</p>
<p class="box4">
<ol>
<li>第一幅图，最开始的样子。</li>
<li>第二幅图，两个标签绝对定位，但是不指定任何偏移量。</li>
<li>第三幅图，用margin负值调整“萌萌哒”的位置，完成。</li>
</ol>
</p>
</body>
</html> Abandonnez l'attribut offset et utilisez plutôt la marge pour ajuster les éléments positionnés de manière absolue. Le principe est : Positionnement absolu. Lorsque le décalage n'est pas défini pour un élément, bien qu'il soit complètement hors du flux documentaire, il est toujours dans sa position d'origine. Utilisez l'attribut offset pour un positionnement précis. La position spécifique dépend du bloc contenant de l'élément positionné de manière absolue. Différents blocs contenant auront des résultats de positionnement complètement différents. L'utilisation de la marge pour un positionnement précis ne dépend de rien d'autre et est plus contrôlable.
4. Positionnement absolu et mise en page globale
Comment utiliser le positionnement absolu pour mettre en page la page globale ? Simple et grossier, ce sera du gâchis si vous n’apprenez pas ! ! !<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位与整体页面布局</title>
<style>
* {
margin: 0;
}/*重置所有margin为0，这一步极其重要，否则布局必乱。*/
html,body,.page {
width: 100%;
height: 100%;
overflow: hidden;
}
.page {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ccc;
}
.header {
position: absolute;
height: 50px;
left: 0;
right: 0;
background-color: purple;
padding: 0 5px;
z-index: 1;
}
.header>h1 {
line-height: 50px;
text-align: center;
}
.aside {
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
width: 100px;
background-color: orange;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
background-color: purple;
}
.footer>h1 {
text-align: center;
line-height: 50px;
}
.content {
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 100px;
background-color: cyan;
overflow: auto;
}
.content h1 {
margin-top: 100px;
margin-left: 50px;
}
.content li {
margin-left: 100px;
margin-top: 80px;
font-size: 24px;
line-height: 1.5;
}
ol {
margin-bottom: 80px;
}
</style>
</head>
<body>
<p class="page">
<p class="header">
<h1>Header</h1>
</p>
<p class="aside">
<h1>Aside</h1>
</p>
<p class="content">
<h1>实现原理</h1>
<ol>
<li>创建一个p.page，绝对定位，铺满全屏。</li>
<li>创建一个p.header，绝对定位，设定高度。</li>
<li>创建一个p.aside，绝对定位，设定宽度。</li>
<li>创建一个p.footer，绝对定位，设定高度。</li>
<li>创建一个p.content，绝对定位，根据周围p的宽高设定它的宽高；<br />
以p.content元素取代原body元素，所有的页面内容都放在这里面。</li>
</ol>
</p>
<p class="footer">
<h1>Footer</h1>
</p>
</p>
</body>
</html>La compréhension complète ci-dessus de la position CSS : absolue est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde le soutiendra. le site Web PHP chinois. Pour plus d'articles sur la compréhension et l'analyse complètes de CSSposition : veuillez faire attention au site Web PHP chinois ! Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication et analyse d'un exemple de modèle de boîte CSSArticle suivant：Explication et analyse d'un exemple de modèle de boîte CSS