stackoom
  简体   繁体   中英

Need to slide one DIV on another DIV. Using only CSS

 原文  2017-12-29 20:15:50  6   1    html/ css

Question

There should be a simple solution, but I can't work one out. I need div with class of geltona to slide onto div with class of zydra . I must use only css, but I can't. It might be obvious, but I can't find a solution as I am only using floats and % in width and height, so I can't really set a location where it should go by keyframes. 

 html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } p { margin: 10px; } .header { height: 5%; width: 100%; } .geltona { height: 15%; width: 50%; background-color: yellow; float: left; } .zydra { height: 15%; width: 50%; background-color: lightblue; float: right; } .balta { height: 30%; width: 70%; background-color: white; float: left; } .juoda { height: 75%; width: 30%; background-color: black; float: right; } .oranzine { height: 20%; width: 35%; background-color: orange; display: inline; float: left; } .melyna { position: relative; height: 45%; width: 35%; background-color: blue; float: right; } .zalia { height: 25%; width: 35%; background-color: green; float: left; } .ruda { height: 5%; width: 100%; background-color: brown; float: left; } /* ANIMACIJOS */ /* 3. Blokas animuotai nukeliauja ant gretimo bloko, pilnai uždengęs gretimą bloką – išnyksta */ /* 20. Pasisuka nuo 45 laipsnių iki 0 laipsnių ir padidėja 30%; */ .zalia:hover { animation: sukasi 3s; } @keyframes sukasi { 0%{transform: rotate(45deg)} 100%{transform: rotate(0deg) scale(1.3)}; } /* 21. Nuotrauka atslenka iš viršaus ir mažėja (trukmė 5 sec); */ .header img { position: absolute; top: -145px; max-width: 145px; max-height: 145px; background: transparent; transition: 5s; } .header:hover img { transition: 5s; top: 0; max-width: 45px; max-height: 45px; } /* MEDIA QUERIES */ @media only screen and (max-width: 768px) and (max-height: 1024px){ .geltona { height: 25%; width: 100%; } .zydra { display: none; } .balta { height: 20%; width: 70%; } .juoda { height: 65%; width: 30%; } .oranzine { display: none; } .melyna { height: 45%; width: 40%; } .zalia { height: 45%; width: 30%; } } 
 <!DOCTYPE html> <html> <head> <title>IPP Kursinis</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" content="initial-scale=1"> <link rel="stylesheet" type="text/css" href="src/css/main.css"> </head> <body> <div class="header"> <img src="img/foto.jpg"> </div> <div class="geltona"></div> <div class="zydra" id="keiciamaSpalva" onmouseover="changeBackground(this.id, 'red', 'yellow');" onmouseout="changeBackground(this.id, 'lightblue', 'black');"> <p>Lorem ipsum</p> </div> <div class="balta" id="balta" onmouseover="showClass();" onmouseout="removeClass();"> </div> <div class="juoda"></div> <div class="oranzine"></div> <div class="melyna"> <p id="demo"></p> </div> <div class="zalia"></div> <div class="ruda"></div> <!-- JAVASCRIPT prasideda nuo čia --> <script type="text/javascript"> /* Keičiama teksto ir fono spalva pagal nurodymus. */ function changeBackground(id, color, textColor) { document.getElementById(id).style.background = color; document.getElementById(id).style.color = textColor; }; /* Parodome bloko klasę ir ją ištriname, kad nesipildytų visas blokas*/ function showClass() { var element = document.getElementById('balta'); element.innerHTML = element.innerHTML + "<p> Šio bloko klasė: "+element.className+"</p>"; }; function removeClass() { document.getElementById('balta').innerHTML = ""; }; /* Rodoma lango, ekrano ir slankiklių informacija, tik tuomet, kai keičiame ekrano dydį. */ window.onresize = displayWindowSize; function displayWindowSize(){ document.getElementById("demo").innerHTML = "Ekrano plotis: " + screen.width + "<br>" + "Ekrano aukštis: " + screen.height + "<br>" + "Lango plotis: " + window.innerWidth + "<br>" + "Lango aukštis: " + window.innerHeight + "<br>" + "Slankiklio horizontali padėtis: " + window.scrollX + "<br>" + "Slankiklio vertikali padėtis: " + window.scrollY; }; </script> </body> </html>

1 answers

solution1
 0 ACCPTED  

With the least amount of changes for this code, I came up with this.

Wrap your two neighbouring containers ( geltona and zydra ) in another container ( gelzy here) and give it the position:relative and the two child containers the position:absolute with left:0 and right:0 instead of the floats .

Make use of the transition on hover to move the geltona (with higher z-index )to 50% of the left to overlap on the blue container 

.gelzy{
position:relative;
height:15%;
width:100%;
}

.geltona {
  height: 100%;
  width: 50%;
  background-color: yellow;
  left:0;
  position: absolute;
  z-index:2;
  transition:left 1s ease-in-out;
}

.zydra {
  height: 100%;
  width: 50%;
  background-color: lightblue;
  right:0;
  position: absolute;
}

.geltona:hover {
  left:50%;
}


 html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } p { margin: 10px; } .header { height: 5%; width: 100%; } .gelzy{ position:relative; height:15%; width:100%; } .geltona { height: 100%; width: 50%; background-color: yellow; left:0; position: absolute; z-index:2; transition:left 1s ease-in-out; } .zydra { height: 100%; width: 50%; background-color: lightblue; right:0; position: absolute; } .geltona:hover { left:50%; } .balta { height: 30%; width: 70%; background-color: white; float: left; } .juoda { height: 75%; width: 30%; background-color: black; float: right; } .oranzine { height: 20%; width: 35%; background-color: orange; display: inline; float: left; } .melyna { position: relative; height: 45%; width: 35%; background-color: blue; float: right; } .zalia { height: 25%; width: 35%; background-color: green; float: left; } .ruda { height: 5%; width: 100%; background-color: brown; float: left; } /* ANIMACIJOS */ /* 3. Blokas animuotai nukeliauja ant gretimo bloko, pilnai uždengęs gretimą bloką – išnyksta */ /* 20. Pasisuka nuo 45 laipsnių iki 0 laipsnių ir padidėja 30%; */ .zalia:hover { animation: sukasi 3s; } @keyframes sukasi { 0% { transform: rotate(45deg) } 100% { transform: rotate(0deg) scale(1.3) } ; } /* 21. Nuotrauka atslenka iš viršaus ir mažėja (trukmė 5 sec); */ .header img { position: absolute; top: -145px; max-width: 145px; max-height: 145px; background: transparent; transition: 5s; } .header:hover img { transition: 5s; top: 0; max-width: 45px; max-height: 45px; } /* MEDIA QUERIES */ @media only screen and (max-width: 768px) and (max-height: 1024px) { .geltona { height: 25%; width: 100%; } .zydra { display: none; } .balta { height: 20%; width: 70%; } .juoda { height: 65%; width: 30%; } .oranzine { display: none; } .melyna { height: 45%; width: 40%; } .zalia { height: 45%; width: 30%; } } 
 <!DOCTYPE html> <html> <head> <title>IPP Kursinis</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" content="initial-scale=1"> <link rel="stylesheet" type="text/css" href="src/css/main.css"> </head> <body> <div class="header"> <img src="img/foto.jpg"> </div> <div class="gelzy"> <div class="geltona"></div> <div class="zydra" id="keiciamaSpalva" onmouseover="changeBackground(this.id, 'red', 'yellow');" onmouseout="changeBackground(this.id, 'lightblue', 'black');"> <p>Lorem ipsum</p> </div> </div> <div class="balta" id="balta" onmouseover="showClass();" onmouseout="removeClass();"> </div> <div class="juoda"></div> <div class="oranzine"></div> <div class="melyna"> <p id="demo"></p> </div> <div class="zalia"></div> <div class="ruda"></div> <!-- JAVASCRIPT prasideda nuo čia --> <script type="text/javascript"> /* Keičiama teksto ir fono spalva pagal nurodymus. */ function changeBackground(id, color, textColor) { document.getElementById(id).style.background = color; document.getElementById(id).style.color = textColor; }; /* Parodome bloko klasę ir ją ištriname, kad nesipildytų visas blokas*/ function showClass() { var element = document.getElementById('balta'); element.innerHTML = element.innerHTML + "<p> Šio bloko klasė: " + element.className + "</p>"; }; function removeClass() { document.getElementById('balta').innerHTML = ""; }; /* Rodoma lango, ekrano ir slankiklių informacija, tik tuomet, kai keičiame ekrano dydį. */ window.onresize = displayWindowSize; function displayWindowSize() { document.getElementById("demo").innerHTML = "Ekrano plotis: " + screen.width + "<br>" + "Ekrano aukštis: " + screen.height + "<br>" + "Lango plotis: " + window.innerWidth + "<br>" + "Lango aukštis: " + window.innerHeight + "<br>" + "Slankiklio horizontali padėtis: " + window.scrollX + "<br>" + "Slankiklio vertikali padėtis: " + window.scrollY; }; </script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Make one div slide over another using only CSS Can I tell one div to use an image from another div. CSS JS div slide change to another div using css animation Can't see third div. Overflows another one Slide one DIV over another DIV Image will not center in my email. Using div. CSS/HTML 2 divs in div. One with %width, one with auto jQuery: Hide a div. After clicking a button show that div and hide another one Increase div to one direction using css only Click on text to engage dropdown, not div. - CSS
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM