时间戳

首页 > 解决方案 > CSS中的Position属性如何用于防止可滚动部分

css - CSS中的Position属性如何用于防止可滚动部分

问题描述

单击信息弹出窗口时，它会变成可滚动部分。我需要这个弹出窗口在没有新滚动部分的情况下占用下面的一些额外空间。

这是普通预览

这是单击信息弹出图标的时间。 这是 CSS Position Absolute，其中一个新的滚动出现在中间，弹出窗口的一半隐藏起来，下面也是完整的 CSS 代码。

在上图中，出现了左侧中心的新滚动，并且弹出窗口的一半隐藏起来，这是我不想要的。

我尝试了 Position: Static，它给出了我需要的确切行为，即没有滚动，并且弹出窗口现在占用了完整的空间，但这会将 Info 图标的相对位置更改为弹出窗口的顶部中间，这是不期望的。如下图所示：

试验一

.popupleftalign .popupcontrolbackground > span:first-of-type > div:first-of-type {
    position: absolute;
    border: 1px solid grey;
    padding: 5px;
    min-width: 250px;
    border-collapse: initial !important;
    border-radius: 6px;
    top: -2px;
    right: 0px;
    max-width: 600px;
    line-height: 22px;
    background-color: #FFFFFF !important;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    z-index: 10000;
    color: black !important;
    word-break: keep-all;
    width: -moz-max-content;
    width: -webkit-max-content;
 }

我需要这个弹出窗口不会隐藏，即没有为此滚动单独的滚动部分。要么它位于其余部分的顶部，要么它在下面占用额外的空间而不隐藏自己。

标签： css

解决方案

在挣扎了一些之后，发现该部分的父级（包含信息图标）的溢出为 Auto overflow: auto;。这就是为什么在此父项中增加内容后创建启用滚动。将父级的溢出更改为可见overflow: visible;（这也是默认选项），不会创建滚动内容，并且只会与其他内容重叠，就像预期的弹出窗口一样。所以，基本上我无意中给出了不完整的信息。所以，为此道歉。

推荐阅读