Html CSS定位——绝对混乱

注意：在你否决这个问题/将其标记为重复问题之前，我首先要说的是，我很清楚，在stackoverflow上已经回答了大量类似的问题。因此，我为我的问题创建了一些图表，这样我就可以进一步补充这个主题（通过提供更清晰的内容），尽管早些时候谷歌做了一些积极的搜索，但我仍然需要一些帮助

因此，我尝试使用HTML和CSS创建一个简单的登录页面：

HTML标题：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Defines a title in the browser toolbar -->
<title>CueClick, You Click.</title>

<!-- Imports the css for the homepage -->
<link rel="stylesheet" href="styles.css">

作为web开发的新手，我了解到，当position属性的值为absolute时，意味着元素相对于最近的祖先（父母、祖父母等）进行定位，元素将从文档中删除，并精确地放置在您告诉它的位置

因此，我根据我的代码将其可视化：

而这，对于内部的元素：

我的印象是logo和.login类将相对于文档主体定位，表单中的段落以及输入框将相对于.login类本身定位。不幸的是，这是现实：

为什么会这样？这里的概念错误是什么？还有其他建议吗

抱歉这么长的帖子，但我希望它能让我真正明白我的困惑之源在哪里。提前谢谢，如果您认为这个问题仍然没有必要，我可以删除它……在我消除疑虑之后：(

---

另外，我使用%进行此操作是因为我也想尝试响应性网页设计

您的表单没有指定的大小。如下图所示更改其样式，您的表单将与图表匹配

form.login {
    position: absolute;
    max-width: 30%;
    max-height: 40%;
    top: 23%;
    left: 30%;
    right: 30%;
    bottom: 25%;
}

编辑：但我宁愿使用其他方法来集中登录表单。像这样

/*--背景图像--*/
身体{
背景图片：url(https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg);
背景重复：无重复；
背景尺寸：封面；
背景附件：固定；
不透明度：0.75；
过滤器：α（不透明度=75）；
}
/*--徽标样式--*/
#标志{
位置：绝对位置；
最大宽度：30%；
高度：自动；
最高：25%；
左：35%；
}
/*--表单样式--*/
form.login{
边框：1px纯黑；
位置：绝对位置；
最大宽度：30%；
最大高度：40%；
最高：23%；
左：30%；
右：30%；
底部：25%；
}
form.login.p{
字体系列：Palatino，“Palatino Linotype”，“Palatino LT STD”，“Book Antiqua”，乔治亚州，衬线；
字体大小：2.5vw；
位置：绝对位置；
左：10%；
排名前10%；
最大宽度：80%；
}
form.login输入[类型=密码]{
位置：绝对位置；
最高：60%；
最大宽度：100%；
宽度：80%；
}

输入您的密钥

您的表单没有指定的大小。如下图所示更改其样式，您的表单将与图表匹配

form.login {
    position: absolute;
    max-width: 30%;
    max-height: 40%;
    top: 23%;
    left: 30%;
    right: 30%;
    bottom: 25%;
}

编辑：但我宁愿使用其他方法来集中登录表单。像这样

/*--背景图像--*/
身体{
背景图片：url(https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg);
背景重复：无重复；
背景尺寸：封面；
背景附件：固定；
不透明度：0.75；
过滤器：α（不透明度=75）；
}
/*--徽标样式--*/
#标志{
位置：绝对位置；
最大宽度：30%；
高度：自动；
最高：25%；
左：35%；
}
/*--表单样式--*/
form.login{
边框：1px纯黑；
位置：绝对位置；
最大宽度：30%；
最大高度：40%；
最高：23%；
左：30%；
右：30%；
底部：25%；
}
form.login.p{
字体系列：Palatino，“Palatino Linotype”，“Palatino LT STD”，“Book Antiqua”，乔治亚州，衬线；
字体大小：2.5vw；
位置：绝对位置；
左：10%；
排名前10%；
最大宽度：80%；
}
form.login输入[类型=密码]{
位置：绝对位置；
最高：60%；
最大宽度：100%；
宽度：80%；
}

输入您的密钥

我可以在这里建议一种方法吗？只需一些CSS规则，我们就可以实现您想要的，具有更大的启动灵活性和可读性。在这种情况下，我们将body标签设置为“flex”它的内容是垂直**，然后添加横轴居中，所以我们得到水平和垂直居中，然后对表单元素做同样的事情

**我们选择弯曲方向：柱，因为这样可以使高度不确定或未知的元素垂直居中

正文{
显示器：flex；
/*指定主轴*/
弯曲方向：立柱；
/*在主轴上垂直居中（上下）*/
证明内容：中心；
/*水平居中（横轴，左侧和右侧）*/
对齐项目：居中；
高度：100vh；
}
img，表格{
保证金：5px；
填充物：5px；
}
#标志{
宽度：40%；
边框：1px纯红；
}
form.login{
边框：1px纯绿色；
宽度：40%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
form.login.p{
宽度：80%；
}
form.login输入[类型=密码]{
宽度：80%；
}

输入您的密钥

我可以在这里建议一种方法吗？只需一些CSS规则，我们就可以实现您想要的，具有更大的启动灵活性和可读性。在这种情况下，我们将body标签设置为“flex”它的内容是垂直**，然后添加横轴居中，所以我们得到水平和垂直居中，然后对表单元素做同样的事情

**我们选择弯曲方向：柱，因为这样可以使高度不确定或未知的元素垂直居中

正文{
显示器：flex；
/*指定主轴*/
弯曲方向：立柱；
/*在主轴上垂直居中（上下）*/
证明内容：中心；
/*水平居中（横轴、左和右）
form.login {
    position: absolute;
    max-width: 30%;
    max-height: 40%;
    top: 23%;
    left: 30%;
    right: 30%;
    bottom: 25%;
}