1. Zuhause
  2. Frage und Antwort
  3. Inner div sollte außerhalb der Eltern div kommen - Überlappung

Inner div sollte außerhalb der Eltern div kommen - Überlappung

2017-06-20 3 views
0

Ich habe ein Elternteil DIV und es enthält zwei Kinder DIV's. Ich brauche das erste Kind DIV überlappend zu setzen (dh es sollte sichtbar außerhalb der Mutter DIV, wenn die Scroll passiert wird es als wie die eigentliche Scroll tun soll)Inner div sollte außerhalb der Eltern div kommen - Überlappung

<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>

Requirement : Der BLAUE DIV sollte außerhalb des Eltern-DIVs sein und das Scrollen sollte jetzt so geschehen. Wenn ich den Bildlauf gemacht habe, muss der BLUE DIV nach OBEN oder NACH UNTEN gehen

Hinweis: Bitte führen Sie und sehen Sie die HTML im Vollbildmodus.

Quelle

2017-06-20 Anonymous

+0

können Sie das konkretisieren, was Sie erreichen wollen? –

+0

@MihaiT Die BULE-Farbe div muss Seite des Eltern-DIV herauskommen. Aber die Funktionalität sollte jetzt so sein. Einzige Sache, um die BULE Farbe DIV nach draußen zu bringen. Scroll und alles sollte jetzt so laufen. –

+0

du meinst wie mit 'position: fixed'? Was bedeutet "außerhalb des Elternteils"? –

Antwort

0

Ist das wonach Sie suchen?

Geändert div#text durch Hinzufügen height: inherit, overflow: hidden und 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>

(Hinweis: Öffnen Sie diese in voller Seite JSFiddle der Vorschau ist zu klein..)

Quelle

2017-06-20 14:17:03 PointR

Verwandte Themen

 Verwandte Themen