How to make Sticky ad or sticky div with close button?
HTML Code
<div id="T4Tutorials_UP1" class="T4Tutorials"> <div class="T4Tutorials_UP" > <h2>Welcome</h2> <a class="Exit" href="#T4Tutorials_UP1">×</a> <div class="Main_Main_Content"> This is the div showing the Main_Content </div> </div> </div>
CSS Code
.T4Tutorials { position: fixed; bottom: 0; height: 90px; left: 0; right: 0; background: red; transition: opacity 500ms; visibility: visible; opacity: 1; } .T4Tutorials:target { visibility: hidden; opacity: 0; display:none } .T4Tutorials_UP { margin: 5px auto; padding: 0px; background: #fff; border-radius: 5px; width: 80%; position: relative; } .T4Tutorials_UP h2 { margin-top: 0; color: green; font-family: Tahoma, Arial, sans-serif; } .T4Tutorials_UP .Exit { position: absolute; top: -40px; right: 0px; font-size: 30px; font-weight: bold; text-decoration: none; color: blue; background-color: chartreuse; } .T4Tutorials_UP .Exit:hover { color: orange; } .T4Tutorials_UP .Main_Content { max-height: 30%; overflow: auto; }
Download Code