Question

如下面的代码片段所示，页面底部有一个绝对定位的红色圆圈。我要实现的目的是使圆的上半部分在屏幕的底部可见，同时使下半部分在视口的底线下方不可见。我觉得自己很想做：-50％可以解决我的问题，但是，这掩盖了超过70-80％的圈子，这使我感到困惑。

任何提示将不胜感激！

    *, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    body {
        background-color: #000;
        color: white;
    }
        .container {
        position: relative;
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }
        .test-layer8 {
        position: absolute;
        background-color: red;
        border-radius: 50%;
        bottom: -50%;
        width: 500px;
        height: 500px;
    }

<div class="container" @mousemove='getCoordinates($event)'>
    <div class="test-layer8"></div>
</div>

Answer 1

具有绝对位置，一旦元素被发送到坐标，边距或平移可以帮助重置屏幕位置：

bottom:0; + translateY(50%)可能会在这里帮助您

*, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    body {
        background-color: #000;
        color: white;
    }
        .container {
        position: relative;
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }
        .test-layer8 {
        position: absolute;
        background-color: red;
        border-radius: 50%;
        bottom: 0;
        transform:translateY(50%);
        width: 500px;
        height: 500px;
    }

<div class="container" @mousemove='getCoordinates($event)'>
    <div class="test-layer8"></div>
</div>

从已知高度开始：bottom : 0 ; + margin-bottom -x；可能也可以。

*, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    body {
        background-color: #000;
        color: white;
    }
        .container {
        position: relative;
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }
        .test-layer8 {
        position: absolute;
        background-color: red;
        border-radius: 50%;
        bottom: 0;
        margin-bottom:-250px;
        width: 500px;
        height: 500px;
    }

<div class="container" @mousemove='getCoordinates($event)'>
    <div class="test-layer8"></div>
</div>

如何使用position：absolute来定位元素，以使其下半部分隐藏在视口下方？底部：-50％；不起作用

1 个答案: