title: Is there a CSS property which, when you set an object's position to relative and move it and resize it, it doesn't change its containers size?
body: <p>So, I have a footer bar, it's got buttons in it. I'm trying to adjust the position of one of the buttons in order to give it more space. I want to move it up 10px and increase its height but when i do that it acts as if its in its original position and moves all the other buttons up, how do i make it so that it doesn't do that?</p>
  <pre><code>/*There's little space between it and the windows navigation bar*/
  #syncButton {
      width: 100px;
      height: 18px;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/9z11b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9z11b.png" alt="There's little space between it and the windows navigation bar" /></a></p>
  <pre><code>/*There's lots of space between it and the windows navigation bar*/
  #syncButton {
      position: relative;
      bottom: 20px;
      width: 100px;
      height: 38px;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/A6ixB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A6ixB.png" alt="There's lots of space between it and the windows navigation bar" /></a></p>