CSS 的完整和实践：绝对位置
¡Hola gente bonita!👋
前牙明确表示姿势relative，并与姿势相结合，经常进行操作absolute。
该位置absolute是一个与当前位置相关的元素，如果没有与该位置相关的元素，则该元素与视口相关。
该视口可在导航面板中显示（请参阅导航界面、como botones、菜单栏等），然后将其显示在网页页面或文档网络渲染空间上。
如果这些元素与这些元素的位置有关，那么这些元素会与这些元素position: absolute相关，但如果没有任何位置，则这些元素会与视口相关。relativeabsolutefixedsticky
库安多是一个勇敢的元素absolute，这些元素不保存在流感空间中，都将图维埃拉的空间保留在这些元素消失的地方。
↕️↔️ 上、右、下、左
在本地坐标系中记录 HTML 元素的内容 ( top, right, bottomy left)。
例如，如果您在 HTML 文档中设置了一个元素，那么该元素将与您的元素协调系统一起使用，并且您的原始元素将位于元素元素 (0x0) 的上级位置。
Esto puede demostrarse con el siguiente ejemplo:
示例 1️⃣
CSS 的一些最受喜爱的特性可以提供绝对位置的位置，并定义元素的起源，并提供对角的基本元素。
重要的是，这一切都是关于我们的位置的竞争，relative以及关于我们的位置的各种元素的竞争absolute。
<div class="container">
<div class="box-1">1</div>
<div class="box-2">2</div>
<div class="box-3">3</div>
<div class="box-4">4</div>
<div class="box-5">5</div>
</div>
.container {
position: relative;
width: 500px;
height: 200px;
border: 2px dashed black;
}
[class^="box"] {
width: 120px;
height: 50px;
font-weight: bold;
line-height: 1.5;
text-align: center;
}
.box-1 {
position: absolute;
background-color: hsl(0deg, 100%, 50%);
}
.box-2 {
position: absolute;
top: 0;
right: 0;
background-color: hsl(30deg, 100%, 50%);
}
.box-3 {
position: absolute;
bottom: 0;
left: 0;
background-color: hsl(60deg, 80%, 50%);
}
.box-4 {
position: absolute;
bottom: 0;
right: 0;
background-color: hsl(120deg, 70%, 50%);
}
.box-5 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: hsl(180, 60%, 50%);
}
💡 使用左、右、上、下属性来获取元素的位置。但是，请不要将左连接到右连接，或者将上连接连接到下连接，以便将其排除在外。
Como puedes 观察最后的 caja esta centrada，para lograr este resultado tieres que colocar todas las propiedades ，，y topcon rightel valor ，pero si no colocamos la declaración el elemento no podrá estar centrado。bottomleft0margin: auto
如果应用程序是您的主要竞争者，那么您将与我们的元素一起移动。
如果您想消除冲突，请考虑视口方面的元素。
如果我们的父亲与科洛卡莫斯分离，或者是因为他的元素，那么科洛卡兰的元素，你就是我们的祖先。
示例 2️⃣
如果未声明任何元素，请调整尺寸。如果您在任何情况下<h1 class="title-2">Lupita Code</h1>都采取绝对立场，请注意，如果您要离开页面，请声明position: absolute100% 中文Ser lo que ocupe el texto del <h1></h1>.
<h1 class="title">Lupita Code</h1>
<h1 class="title-2">Lupita Code</h1>
.title {
background-color: yellow;
}
.title-2 {
position: absolute;
background-color: lightblue;
}
观察图像时，请先将其定位为缺陷，然后再将其定位为可能的页面，然后将其定位为
绝对位置。
禁止在视口方面使用任何颜色，并且不声明任何尺寸。
如果尺寸是一个元素，则可以通过计算来实现连体模型。这是一个绝对确定的元素位置的锚点。
示例 3️⃣
在前面的例子中，我的行动以我的父亲为中心，我的力量与我的财产有关transform。
<div class="container">
<div class="box"></div>
</div>
.container {
position: relative;
width: 200px;
height: 200px;
border: 2px dashed black;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); ⬅️
width: 60px;
height: 60px;
background-color: lightblue;
}
这是使用 CSSposition: absolute和属性的其他元素的中心形式transform，它是一个元素的功能relative
示例 4️⃣
¿Qué pasaría si a un elemento inlinele aplicamos el valor absolute?🤔
Sabemos que los elementos en linea no recognizenDimensiones (width, height) alone ocupan lo que tengan en su contenido, por lo tanto no podemos cambiar su tamaño a menos que se cambie su comportamiento agregando la declaración display: blocko display: inline-block。
En este ejemplo tenemos un elemento <span></span>que por defeto es un elemento inline, no vamos a colocar la propiedad displayalone la declaración position: absolutey alone con esto podemos cambiar el tamaño del elemento, vamos a comprobarlo:
<span class="text">Lupita code</span>
.text {
position: absolute;
width: 200px;
height: 100px;
padding: 2em;
text-align: center;
background-color: hsl(30deg, 100%, 50%);
}
📋 结论
☑️ El elemento es posicionado respecto al ancestro mas cercano que también este posicionado, si no encuentra ninguno tomara como Referencia el viewport.
☑️ 顶部、右侧、底部、左侧 y z 索引的绝对元素位置。
☑️ 绝对位置与相对位置相结合，并且可以在 CSS 中使用。
☑️ El elemento no conserva su espacio en el Flujo, todo el espacio que se tuvierathoughtado para ese elemento desaparece.
☑️ 元素的尺寸适用于内容，除了 si 定义宽度和高度。
☑️ 绝对运动的元素位置和其他元素的超级元素。
🔎资源：
感谢您🦸🏻♀️
社交方面的注意事项：
▶️YouTube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵TikTok