代码之家 › 专栏 › 技术社区 › J. Doe

CSS:关于绝对位置的几个问题

absolute css-position position css html

J. Doe · 技术社区 · 6 年前

我有几个关于位置的问题:绝对中心元素。我查看了几乎所有position absolute的文章,但没有找到任何东西可以解释我现在所问的这种奇怪的行为。以下是与问题相关的代码笔(第三个问题除外): https://codepen.io/anon/pen/LQrjzz

当div width units从px更改为percentage(40px=12.2%)时,为什么div会跳下?如果我想使用percentage,如何解决这个问题?
为什么在调整窗口大小时,即使还有空间,div也会跳下( https://i.imgur.com/4DPu9Vp.gifv )? 我怎样才能解决这个问题?
为什么在这段代码中,第二个div的高度为0?我预计它的高度是50px,宽度是50px。

main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#first{
  width: 100px;
  height: 100px;
  background: black;
}

#second{
  width: 50%;
  height: 50%;
  background: aqua;
}

<main>
  <div id="first"></div>
  <div id="second"></div>
</main>

//代码笔中的代码

HTML:

<main>
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor</p>
  <div></div>
</main>

CSS:

main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px red solid;
  padding: 10px;
}

h1{
  font-size: 32px;
  width: 10em;
  border: 2px black dotted;
}

p{
  font-size: 32px;
  width: 10em;
  border: 2px green dotted;
  display: inline-block;
  vertical-align: middle;
}

div{
  display: inline-block;
  width: 40px; /*  12.2%  */
  height: 40px;
  background: lawngreen;
  vertical-align: middle;
  border: 2px blue dotted;
}

我希望这些问题不是愚蠢的。非常感谢你。

1 回复 | 直到 6 年前

Karl-André Gagnon 6 年前

当div width units从px更改为percentage(40px=12.2%)时,为什么div会跳下?如果我想使用percentage,如何解决这个问题?

你的 div 位于没有定义宽度的容器中。自 部门 CSS本身可以更改容器的宽度,但无法解析以百分比形式设置的宽度。解决这个问题取决于你的实际目标是什么。。。

为什么在调整窗口大小时,即使还有空间,div也会跳下?我怎样才能解决这个问题?

默认情况下, left, right, bottom, top 设置为 auto . 容器的宽度由其内容设置,但 汽车 另一方面,财产意味着 “的价值 right 不能低于 0 ." 既然你 left 设置为 50% 和 正当 到 汽车 (默认),相当于设置 max-width 到 50% :容器的宽度不能超过其相对父宽度的50%。

这里有一个GIF帮助您可视化正在发生的事情:

要解决这个问题,您需要另一个包装器和一个不同的定心技巧,例如 inline-block 内容:

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

*{
  margin: 0;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/**
 new element
 */
.center{
  position: absolute;
  top: 50%;
  left: 0;
  width : 100%;
  font-size : 0;
  text-align:center;
  transform: translateY(-50%);
}

/**
 center with inline block
 */
main{
  display:inline-block;
  font-size : 1rem;
  border: 2px red solid;
  padding: 10px;
}

h1{
  font-size: 32px;
  width: 10em;
  border: 2px black dotted;
}

p{
  font-size: 32px;
  width: 10em;
  border: 2px green dotted;
  display: inline-block;
  vertical-align: middle;
}

.block{
  display: inline-block;
  width: 40px; /*  12.2%  */
  height: 40px;
  background: lawngreen;
  vertical-align: middle;
  border: 2px blue dotted;
}

<div class="center">
  <main>
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor</p>
    <div class="block"></div>
  </main>
</div>

为什么在这段代码中,第二个div的高度为0?我预计它的高度是50px,宽度是50px。

出现这种情况的原因与问题#1完全相同。同样,我们需要知道您的最终目标,以进一步帮助您实现您在这里想要的目标。