Question

我有一个父DIV，它包含两个CHILD DIV。我需要将第一个子DIV设置为重叠（即，它应该在父DIV之外可见，如果滚动发生它应该像实际滚动一样）

<html>
<head>
<title>Div Tag Overlap</title>
<style>
div#menu {
    text-align: center;
    font-size: 120%;
    background-color:deepskyblue;
    padding: 5px;
    height: 600px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    z-index:1;
}
div#divSlogan {
    background-color: #FFBD01;
    width: 600px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1.15%;
    padding: 0.1%;
    -moz-box-shadow: 0px 0px 10px 2px #888888;
    -webkit-box-shadow: 0px 0px 10px 2px #888888;
    box-shadow: 0px 0px 10px 2px #888888;
    text-align:center;
    position:relative;
    z-index:5 ;
    overflow:scroll;
}
div#text {
  width:100%;
  position:absolute;
}

div#clean {
  clear:both;
  margin:0px;
  padding:0px;
}
div#main {
    width:800px;
    height:800px;
}
</style>
</head>
<body>
<div id="main">
<div id="divSlogan">
    <div id="menu">test, test, test, test<a href="https://www.google.co.in">Link</a></div>
    <div id="clean"></div>
    <div id="text">
        Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. 
        Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. 
    </div>
</div>
</div>
</body>
</html>

要求： BLUE DIV应该在Parent DIV之外，滚动应该像现在一样发生。如果我做了滚动，则蓝色DIV需要上升或下降

注意：请在完整视图模式下运行并查看HTML。

Answer 1

这是你要找的吗？

通过添加div#text，height: inherit和overflow: hidden来修改top: 0。

div#menu {
    text-align: center;
    font-size: 120%;
    background-color:deepskyblue;
    padding: 5px;
    height: 600px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    z-index:1;
}
div#divSlogan {
    background-color: #FFBD01;
    width: 600px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1.15%;
    padding: 0.1%;
    -moz-box-shadow: 0px 0px 10px 2px #888888;
    -webkit-box-shadow: 0px 0px 10px 2px #888888;
    box-shadow: 0px 0px 10px 2px #888888;
    text-align:center;
    position:relative;
    z-index:5 ;
    overflow:scroll;
}
div#text {
  width:inherit;
  height: inherit;
  overflow: hidden;
  position: fixed;
  top: 0;
}

div#clean {
  clear:both;
  margin:0px;
  padding:0px;
}
div#main {
    width:800px;
    height:800px;
}

<div id="main">
<div id="divSlogan">
    <div id="menu">test, test, test, test<a href="https://www.google.co.in">Link</a></div>
    <div id="clean"></div>
    <div id="text">
        Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. 
        Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. Slogan. 
    </div>
</div>
</div>

（注意：在整页中打开它.JSFiddle的预览太小了。）

内部div应该在父div之外 - 重叠

1 个答案: