html – 如果位置：绝对只用CSS,如何强制2个元素之间的空格？

概述我正在尝试制作一个菜单,当鼠标在div上时显示,其中一些按钮位于div顶部,一些按钮位于底部. .session { position: relative; width: 300px;}.button { background-color: white; border: 1px solid black; width: 20px; height: 我正在尝试制作一个菜单,当鼠标在div上时显示,其中一些按钮位于div顶部,一些按钮位于底部.

.session {    position: relative;    wIDth: 300px;}.button {    background-color: white;    border: 1px solID black;    wIDth: 20px;    height: 20px;}.button:hover {    cursor: pointer}.top-menu,.bottom-menu {    display: none;}.session:hover .top-menu{    position: absolute;    display: block;    top: 0px;    right: -20px;}.session:hover .bottom-menu {    position: absolute;    display: block;    bottom: 0px;    right: -20px;}.big-Box {    background-color: red;    height: 300px;}.normal-Box {    background-color: green;    height: 100px;}.small-Box {    background-color: blue;    height: 50px;}

<div >    <div >        <div >1</div>        <div >2</div>        <div >3</div>    </div>    <div >        <div >a</div>    </div></div><div >    <div >        <div >1</div>        <div >2</div>        <div >3</div>    </div>    <div >        <div >a</div>    </div></div><div >    <div >        <div >1</div>        <div >2</div>        <div >3</div>    </div>    <div >        <div >a</div>    </div></div>

The JSFiddle demo

它工作正常,但正如您可以看到当您将鼠标移动到底部蓝色会话时,按钮相互覆盖.当部分太小时,我希望它使用下面的空格.通常当我有位置：相对时,它会自动将另一个div推入下一行,但是我无法找到一种方法来实现相同的效果而不使用position：absolute.在实际情况中,部分的高度取决于它包含的内容,因此无法对特定div的位置进行硬编码.

那么,有没有一种方法,只使用CSS,让我在使用position：absolute时留下一些空格或者是否有一种方法可以使用position：relative来实现相同的效果？

附：已有一个答案.这很棒,但如果可以在没有柔性箱的情况下完成工作,那就更好了.

解决方法 位置：绝对;从文档流中取出.top-menu和.bottom-menu,这样他们就不会知道页面上的其他位置.这意味着它们将重叠并且不会影响页面上其他元素的位置.

位置：相对;将不适合,因为这会将元素从页面上绘制的位置移开,这意味着很难将.bottom-menu定位在父元素的底部而不依赖于像素值.

通过重组和使用flexBox模型,如果.top-menu侵占其空间,则可以移动.bottom-menu.

需要进行以下更改：

>在一个名为.menu的新div中包装.top-menu和.bottom-menu
>为.menu添加以下规则：

> display：none;默认隐藏它
> flex-direction：column;告诉孩子们要从上到下排列自己
>辩解内容：空间 – 间隔;告诉孩子要素均匀分布.一个在顶部,一个在底部
>左：100％;显示其父级右侧的菜单
>最小高度：100％;默认情况下告诉菜单是其父级的整个高度
>位置：绝对;允许左定位工作

>为.session添加以下规则：hover .menu：

>显示：flex;告诉孩子使用flexBox模型并在其父项悬停时显示菜单

>删除.session：悬停.top-menu和.session：悬停.bottom-menu

.session {  position: relative;  wIDth: 300px;}.button {  background-color: white;  border: 1px solID black;  wIDth: 20px;  height: 20px;}.button:hover {  cursor: pointer}.menu {  display: none;  flex-direction: column;  justify-content: space-between;  left: 100%;  min-height: 100%;  position: absolute;}.session:hover .menu {  display: flex;}.big-Box {  background-color: red;  height: 300px;}.normal-Box {  background-color: green;  height: 100px;}.small-Box {  background-color: blue;  height: 50px;}

<div >  <div >    <div >      <div >1</div>      <div >2</div>      <div >3</div>    </div>    <div >      <div >a</div>    </div>  </div></div><div >  <div >    <div >      <div >1</div>      <div >2</div>      <div >3</div>    </div>    <div >      <div >a</div>    </div>  </div></div><div >  <div >    <div >      <div >1</div>      <div >2</div>      <div >3</div>    </div>    <div >      <div >a</div>    </div>  </div></div>

替代方法

如果需要ie8支持,则不能选择flexBox.幸运的是,我们可以使用相同的标记获得类似的结果,但使用定位和填充：

>为.menu添加以下规则：

> Box-sizing：border-Box;确保填充包含在高度中
> padding-bottom：22px;底部填充等于底部菜单的高度.这将用于为底部菜单“预留”空间

>为.session添加以下规则：hover .menu：

>显示：块;在其父项悬停时显示菜单

>为.bottom-menu添加以下规则：

>底部：0;将它定位在其父级.menu的底部.这将把它放在底部的“保留”填充空间中
>位置：绝对;允许底部定位工作

这背后的原理是因为.top-menu在文档流程中,它将导致父.menu在高度上扩展以适应它.通过在.menu的底部添加填充,可以绝对定位.bottom菜单,因为它总是使用该空间并且不会模糊.top-menu.

.session {  position: relative;  wIDth: 300px;}.button {  background-color: white;  border: 1px solID black;  wIDth: 20px;  height: 20px;}.button:hover {  cursor: pointer}.menu {  Box-sizing: border-Box;  display: none;  left: 100%;  min-height: 100%;  padding-bottom: 22px;  position: absolute;}.session:hover .menu {  display: block;}.bottom-menu {  bottom: 0;  position: absolute;}.big-Box {  background-color: red;  height: 300px;}.normal-Box {  background-color: green;  height: 100px;}.small-Box {  background-color: blue;  height: 50px;}

<div >  <div >    <div >      <div >1</div>      <div >2</div>      <div >3</div>    </div>    <div >      <div >a</div>    </div>  </div></div><div >  <div >    <div >      <div >1</div>      <div >2</div>      <div >3</div>    </div>    <div >      <div >a</div>    </div>  </div></div><div >  <div >    <div >      <div >1</div>      <div >2</div>      <div >3</div>    </div>    <div >      <div >a</div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 如果位置：绝对只用CSS,如何强制2个元素之间的空格？全部内容，希望文章能够帮你解决html – 如果位置：绝对只用CSS,如何强制2个元素之间的空格？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。