1. Accueil
  2. Question et réponse
  3. Div intérieure devrait sortir de la div parent - Chevauchement

Div intérieure devrait sortir de la div parent - Chevauchement

2017-06-20 3 views
0

Je suis ayant un DIV Parent et il contient deux DIV de l'enfant. Je dois mettre le premier enfant DIV en chevauchement (elle doit visible à l'extérieur de la DIV parent, si le défilement est arrivé, il doit faire comme comme le défilement réelle)Div intérieure devrait sortir de la div parent - Chevauchement

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

Exigence : La DIV BLEUE devrait sortir de la DIV Parent et le défilement devrait avoir lieu comme maintenant. Si j'ai fait le parchemin, la DIV BLEUE doit aller vers le HAUT ou vers le BAS

Remarque: Veuillez exécuter et voir le code HTML en mode Vue complète.

Source

2017-06-20 Anonymous

+0

pouvez-vous être plus précis sur ce que vous voulez atteindre? –

+0

@MihaiT La div couleur BULE doit sortir du côté de la DIV Parent. Mais la fonctionnalité devrait être comme maintenant. La seule chose à faire sortir la couleur BULE DIV à l'extérieur. Faites défiler et tout devrait faire comme maintenant. –

+0

vous voulez dire utiliser 'position: fixed'? que veut dire "sortir de parent"? –

Répondre

0

Est-ce ce que vous cherchez?

Modifié div#text en ajoutant height: inherit, overflow: hidden et 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>

(Remarque: ouvrir cette en pleine page Aperçu avant de jsFiddle est trop petit..)

Source

2017-06-20 14:17:03 PointR

 Questions connexes

  • Aucun problème connexe^_^