CODEWITHSUNDEEP
htmlcss
Fuffi
Fuffi

Reputation: 1

How can I make a sticky element that does not push other elements?

I want to make a box on the bottom-right that is sticky and when I scroll it remains there, that was easy but I also want that it is on top of other elements, so that it does not require "space" on the page, I don't really know how to explain it, look at this screenshot, I'm currently on the bottom of the page and my image is taking a chunk of space at the end, I want that it acts like absolute but also remaining sticky, I tried using layers but either I used them wrong or they are not meant for this.

This is for my site, and I want to use only css and html.

My css:

 div.email {
 background-image: url("./img/fish2.gif");
 background-repeat: no-repeat;
 position: sticky;
 text-align: center;
 bottom: 5px;
 right: 5px;
 padding: 30px;
 float: right;
 color: white;
 }
 
 div.email a {
 background: none;
 text-decoration: none;
 }

Part of my html:

  1 <!DOCTYPE html>
  2 <html>
  3         <head>
  4                 <meta charset="UTF-8">
  5                 <link rel="stylesheet" type"text/css" href="style.css"/>
  6                 <title>basato</title>
  7         </head>
  8 
  9 
 10         <a>ð~]~Y©ð~]~Y~Vð~]~Y| ð~]~Y~Z ð~]~Y~Xð~]~Y¤ð~]~Y£ð~]~Y©ð~]~Y§ð~]~Y¤ð~]~Y¡ ð~]~Y¤ð~]~Y~[ ð~]~Y¢ð~]~Y® ð~]~Y¨ð~]~Y¤ð~]~Yªð~]~Y¡ [cwoPj1YEciQ].mp3</a><br>
 11         <audio controls loop preload="none">
 12                 <source src="./mp3/ð~]~Y©ð~]~Y~Vð~]~Y| ð~]~Y~Z ð~]~Y~Xð~]~Y¤ð~]~Y£ð~]~Y©ð~]~Y§ð~]~Y¤ð~]~Y¡ ð~]~Y¤ð~]~Y~[ ð~]~Y¢ð~]~Y® ð~]~Y¨ð~]~Y¤ð~]~Yªð~]~Y¡ [cwoPj1YEciQ].mp3" type="aud    io/mp3">
 13         </audio><br>
------other music----
390         <a>ð~]~Y©ð~]~Y~Vð~]~Y| ð~]~Y~Z ð~]~Y~Xð~]~Y¤ð~]~Y£ð~]~Y©ð~]~Y§ð~]~Y¤ð~]~Y¡ ð~]~Y¤ð~]~Y~[ ð~]~Y¢ð~]~Y® ð~]~Y¨ð~]~Y¤ð~]~Yªð~]~Y¡ [cwoPj1YEciQ].mp3</a><br>
391         <audio controls loop preload="none">
392                 <source src="./mp3/ð~]~Y©ð~]~Y~Vð~]~Y| ð~]~Y~Z ð~]~Y~Xð~]~Y¤ð~]~Y£ð~]~Y©ð~]~Y§ð~]~Y¤ð~]~Y¡ ð~]~Y¤ð~]~Y~[ ð~]~Y¢ð~]~Y® ð~]~Y¨ð~]~Y¤ð~]~Yªð~]~Y¡ [cwoPj1YEciQ].mp3" type="aud    io/mp3">
393         </audio><br>
394
395         <div class="email">Se vuoi aggiungere una canzone mandami l'mp3 a <a href="mailto: [email protected]">[email protected]</a><br> e io decidero se metterla o no</div>
396   
397 </html>

Upvotes: 0

Views: 204

Answers (2)

lord_of_the_leek
lord_of_the_leek

Reputation: 36

Okay, i think i didn't understand it in the first place, but you should achieve it with position:fixed instead and the wrapper being position: realtive. you can test it in jsfiddle.net

<div class="wrapper">
    <div class="text">
        <p>a lot of text goes here for testing</p>
    </div>

    <div class="inner">
        <p>hello</p>
    </div>
</div>

css:
.wrapper {
    position:relative;
}
.inner {
    position: fixed;
    background-color: white;
    display: table;
    bottom:10px;
    right: 20px;
    padding: 20px;
    border: 2px solid red;
}

Upvotes: 0

Alexander Nied
Alexander Nied

Reputation: 13623

If I'm understanding your desired outcome, this sounds like position: sticky is not the right approach, and that you might instead want to use position: fixed:

.fixed-content {
  color: white;
  background: black;
  width: 200px;
  padding: 10px;
  position: fixed;
  right: 0;
  bottom: 0;
}
<nav>
  <ul>
    <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
    <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
    <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
    <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
    <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
  </ul>
</nav>

<h1>Lorem</h1>

<h2>Ipsum</h2>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo.</p>

<dl>
  <dt>Definition list</dt>
  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
  <dt>Lorem ipsum dolor sit amet</dt>
  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
</dl>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>
  
<div class="fixed-content">This is your special box to be fixed in the lower right without taking up any space in the normal document flow</div>

From MDN's reference for position: sticky (emphasis added):

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

Whereas MDN's reference for position: fixed (emphasis added):

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block.

Upvotes: 1

Related Questions