接受的解决办法效果很好，但国际海事组织对其为何有效缺乏解释。下面的示例可以归结为基本的内容，并将重要的CSS与不相关的样式CSS区分开来。另外，我还详细解释了CSS定位是如何工作的。
TLDR；如果您只想要代码，请向下滚动到结果.
问题
有两个独立的同级元素，目标是定位第二个元素(使用id的infoi)，因此它出现在前面的元素(带有class的navi)。无法更改HTML结构。
拟议解决方案
为了达到预期的结果，我们将移动，或定位，第二个元素，我们将称之为#infoi因此，它出现在第一个元素中，我们将称之为.navi..具体来说，我们想#infoi的右上角.navi.
CSS职位所需知识
CSS有几个用于定位元素的属性。默认情况下，所有元素都是position: static..这意味着元素将按照其在HTML结构中的顺序进行定位，很少有例外。
另一个position值是relative, absolute，和fixed..通过设置元素的position对于这3个值中的一个，现在可以使用以下4个属性的组合来定位元素：top
right
bottom
left
换句话说，通过设置position: absolute，我们可以添加top: 100px若要从页面顶部定位元素100 px，请执行以下操作。相反，如果我们bottom: 100px元素将从页面底部定位为100 px。
这里是许多CSS新手迷路的地方 - position: absolute有一个参照系。在上面的示例中，参考框架是body元素。position: absolute带着top: 100px表示元素被定位。100px从顶部body元素。
可以通过设置position的父元素的除position: static..也就是说，我们可以通过提供一个父元素来创建一个新的职位上下文：position: absolute;
position: relative;
position: fixed;
例如，如果
另一个因素意识到IS堆栈顺序-或者元素是如何在z方向堆放的。这里必须知道的是元素的堆栈顺序，默认情况下，元素的顺序是由HTML结构中元素顺序的反向定义的。考虑以下示例：
在这个例子中，如果两个
position: absolute;
width: 50%;
height: 50%;}#bottom {
top: 0;
left: 0;
background-color: blue;}#top {
top: 25%;
left: 25%;
background-color: red;}
可以使用css使用z-index或order财产。
我们可以忽略这个问题中的堆叠顺序，因为元素的自然HTML结构意味着我们想要出现的元素top在另一个元素之后。
所以，回到手头的问题-我们将使用位置上下文来解决这个问题。
解
如上所述，我们的目标是将#infoi元素中的.navi元素。为此，我们将包装.navi和#infoi新元素中的元素
然后通过以下方式创建一个新的职位上下文.wrapper a position: relative..wrapper {
position: relative;}
有了这个新的职位上下文，我们可以定位#infoi内.wrapper..首先，给#infoi a position: absolute，允许我们定位#infoi绝对在.wrapper.
然后添加top: 0和right: 0若要将#infoi元素位于右上角。记住，因为#infoi元素正在使用.wrapper作为其位置上下文，它将位于.wrapper元素。#infoi {
position: absolute;
top: 0;
right: 0;}
因为.wrapper只是一个容器.navi，定位#infoi在右上角.wrapper的右上角的效果。.navi.
我们得到了它，#infoi的右上角.navi.
结果
下面的示例可以归结为基本的内容，并包含一些最小的样式。/*
* position: relative gives a new position context
*/.wrapper {
position: relative;}/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/.navi {
background-color: #eaeaea;
height: 40px;}/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/#infoi {
position: absolute;
top: 0;
right: 0;
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;}
备用(无包装)解决方案
在这种情况下，我们不能编辑任何HTML，这意味着我们不能添加一个包装元素，我们仍然可以达到预期的效果。
而不是使用position: absolute在#infoi元素，我们将使用position: relative..这允许我们重新定位#infoi元素的默认位置。.navi元素。带着position: relative我们可以用否定词top值将其从默认位置向上移动，并且left价值100%减去几个像素，使用left: calc(100% - 52px)把它定位在右边。/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/.navi {
background-color: #eaeaea;
height: 40px;
width: 100%;}/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/#infoi {
position: relative;
display: inline-block;
top: -40px;
left: calc(100% - 52px);
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;}
4767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
