0
私は1つの親DIVを持っていて、2つの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>
(スクロールが起こっている場合、それは実際のスクロールなど行う必要があり、すなわち、それは親DIVの目に見える外のはず)の重複で最初の子DIVを設定する必要があります: BLUE DIVは親DIVの外に来て、スクロールは今のように起こるはずです。スクロールした場合、青いDIVは上または下に移動する必要があります
注:完全表示モードでは、HTMLを正常に実行して表示してください。
あなたが達成したいかについて、より具体的なことができますか? –
@MihaiT BULEのcolor divは親DIVの側から出てくる必要があります。しかし機能は今のようにすべきである。 BULEの色をDIVの外に持って来るものだけ。スクロールして、すべて今のようにする必要があります。 –
あなたは 'position:fixed'を使うのが好きですか? 「親の外に出る」とはどういう意味ですか? –