在按钮下

Question

我是HTML和CSS的新手，并试图在本教程的按钮下创建一个弹出窗口-[操作方法-弹出窗口] [1]。
我试图更改位置，显示和其他属性，但这没用。

CSS

.popup {
    position: relative;
    display: inline;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        height: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
    }

    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

HTML

<button class="popup" onclick="popupShow()"> Calendar
    <span class="popuptext" id="myPopup">A Simple Popup!</span>
</button>

JavaScript

const popupShow = () => {
    const popup = document.querySelector("#myPopup");
    popup.classList.toggle("show");
}

Answer 1

您可以使用bottom:125%值代替pixel

也不要忘记工具提示position及其border-width

编辑：调整了弹出窗口的高度，以查看效果

const popupShow = () => {
        const popup = document.querySelector("#myPopup");
        popup.classList.toggle("show");
    }

.popup {
        position: relative;
        display: inline;
        left:50%;
        margin-top:35px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
        .popup .popuptext {
            visibility: hidden;
            width: 160px;
            height: 60px;
            background-color: #555;
            color: #fff;
            display:inline-block;
            text-align: center;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            z-index: 1;
            /*bottom: 125%;*/
            left: 0px;
            /*margin-left: -80px;*/
            bottom: -85px;
        }
    
        .popup .popuptext::after {
            content: "";
            position: absolute;
            top: -5px;
            left: 50%;
            margin-left: -5px;
            border-width: 0 5px 5px 5px;
            border-style: solid;
            border-color: #555 transparent;
        }
    
        .popup .show {
            visibility: visible;
            -webkit-animation: fadeIn 1s;
            animation: fadeIn 1s;
        }

<button class="popup" onclick="popupShow()"> Calendar
        <span class="popuptext" id="myPopup">A Simple Popup!</span>
    </button>

Answer 2

您当前拥有的所有东西都可以正常工作，但是如果仅渲染按钮和弹出窗口而没有任何其他样式，则会发现绝对定位的弹出窗口在屏幕上显示出来（因为它的位置是绝对的），我添加了一些身体样式来显示弹出窗口在屏幕中央。

我还误解了您的问题，并认为您希望在底部显示弹出窗口，因此它与您的示例看起来略有不同，但原理仍然相同。

const popupShow = () => {
    const popup = document.querySelector("#myPopup");
    popup.classList.toggle("show");
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100vh;
}
.popup {
    position: relative;
    display: inline;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        height: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        top:calc(100% + 8px);
        left: 50%;
        margin-left: -80px;
    }

    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: -10px;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #555   transparent ;
    }

    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

<button class="popup" onclick="popupShow()"> Calendar
    <span class="popuptext" id="myPopup">A Simple Popup!</span>
</button>

Answer 3

我稍微更改了CSS。看到带有 / * changed * / 的行。

const popupShow = () => {
  const popup = document.querySelector("#myPopup");
  popup.classList.toggle("show");
}

.popup {
  position: relative;
  display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 50px; /*add*/
}

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  height: auto; /*changed*/
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: -40px; /*changed*/
  left: 50%;
  margin-left: -80px;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: -32%; /*changed*/
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent; /*changed*/
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

<button class="popup" onclick="popupShow()"> Calendar
    <span class="popuptext" id="myPopup">A Simple Popup!</span>
 </button>