慕勒3428872
接受的解决办法效果很好,但国际海事组织对其为何有效缺乏解释。下面的示例可以归结为基本的内容,并将重要的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个属性的组合来定位元素:toprightbottomleft换句话说,通过设置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;例如,如果
position: absolute;
width: 50%;
height: 50%;}#bottom {
top: 0;
left: 0;
background-color: blue;}#top {
top: 25%;
left: 25%;
background-color: red;}
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;}
* 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;}