如何保持两个元素的位置：粘稠的东西相互掩盖？

问题描述 投票：0回答：2

[当适当位置在彼此顶部堆叠的两个块div上设置为粘性时，当页面呈现并且用户向下滚动时，两个div都会停留在视图的顶部。底部的div结束于顶部的div。我要做什么或弄清楚的是，如何在sticky_box_a的下面制作sticky_box_b，粘住（或叠放）？这样，底部div（sticky_div_b_）不会遮盖顶部div（sticky_box_a）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="author" content="AFTERxL1F3">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>StackOverFlow.com Example By: AFT3RL1F3</title>

    <style type="text/css">

        .sticky_box_a
        {
            display: block;
            position: sticky;
            position: -webkit-sticky;
            background-color: blue;
            width: 100%;
            height: 200px;
            margin: 0;
            padding: 0;
            top: 0;
        }

        .sticky_box_b
        {
            display: block;
            position: sticky;
            position: -webkit-sticky;
            background-color: red;
            width: 50%;
            height: 400px;
            margin: 0 auto 0 auto;
            padding: 0;
            top: 0;
        }
    </style>
</head>
<body>

    <div class="sticky_box_a">
        THIS IS A BOX WITH THE CSS PROPERTY "position: sticky;"
    </div>

    <div class="sticky_box_b">
       This is 'ANOTHER' box with the CSS3 'property: sticky;'
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>
html responsive-design position sticky
2个回答
0
投票

这里是一个例子

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}

<div class="sticky">
<p> This is your sticky box </p>
</div>
<div>
<p>This is your other divs and properties </p>
</div>
0
投票

所以我想通了，实际上非常简单。如果您想将2个div粘在一起，例如下拉式响应式顶部导航的下拉菜单，则必须将它们一起放在容器内。希望这对其他搜索者有所帮助！ AFT3RxL1F3;-）

<html lang="en">

<head>
    <meta name="author"
          content="AFTERxL1F3">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>StackOverFlow.com Example By: AFT3RL1F3</title>

    <style type="text/css">
        .box-a
        {
            position: sticky;
            position: -webkit-sticky;
            top: 0;
        }

        .box-b
        {
            height: 200px;
            background-color: red;
            width: 50%;
            margin-left: 50%;
            margin-right: 50%;
        }

        .box-c
        {
            width: 100%;
            height: 75px;
            background-color: blue;
        }

    </style>
</head>

<body>
    <h1>HELLO WORLD!</h1>
    <br><br>
    <div class="box-a">
        <div class="box-b"></div>
        <div class="box-c"></div>
    </div>


    <br>a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q
    <br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z
    <br><br><br><br>HELLO WORLD!
    <br>a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q
    <br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z
    <br><br><br><br>HELLO WORLD!

</body>

</html>```
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.