2017-06-20 10 views
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を正常に実行して表示してください。

+0

あなたが達成したいかについて、より具体的なことができますか? –

+0

@MihaiT BULEのcolor divは親DIVの側から出てくる必要があります。しかし機能は今のようにすべきである。 BULEの色をDIVの外に持って来るものだけ。スクロールして、すべて今のようにする必要があります。 –

+0

あなたは 'position:fixed'を使うのが好きですか? 「親の外に出る」とはどういう意味ですか? –

答えて

0

これはあなたが探しているものですか?

height: inheritoverflow: hidden、およびtop: 0を追加することにより、div#textを修正しました。

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のプレビューが小さすぎる。。)

関連する問題