How can I have a fixed div next to a parent div?

Question

I\'m trying to get a div with a button next to a parent div. Like this:

____________
|relative  |
|          |
|          |
|          |_______
|          |          


        

Answer 1

you're looking for position: absolute, not fixed -- if your parent has the class parent and the button has the class button, what you need is similar to (assuming button has a fixed width of 100px for this):

.parent { position: relative; }
.button { position: absolute; top: 45%; right: -100px; }

here's an example fiddle (added some width/heights to demonstrate, these should come from your content instead) http://jsfiddle.net/WpnP4/

Edit: just realized the question is not 100% clear -- I assumed you wanted the button to be next to a specific element and scroll with the screen. Use position:fixed if you want the button element to stay fixed in the screen.

Answer 2

Your main problem is that the element with position: fixed is always relative to the body. It behaves differently from elements with position: absolute, which is relative to parent element with position: relative declared.

So the main problem is, that if you set left to the fixed element, it sticks to left edge of body element, even if it's parent is positioned relative. But you could use a trick, and skip left declaration for fixed element.

.main {
    /*just for visualisation*/
    width: 300px;
    height: 1500px;
    background: #ccc;
}
.main, .fake-wrapper {
    float: left;
}
.fixed {
    position: fixed;
    top: 50%;
}

<div class="main">
<!-- your content -->
</div>
<div class="fake-wrapper">
    <div class="fixed">
        <a href="/">click!</a>
    </div>
</div>

Here's a JSFiddle example

Answer 3

Use position:fixed for the second div

HTML

<div class="main">
    zx
</div>
<div class="fix">
    <button>Click</button>
</div>

CSS

html, body{
    height:100%;
    margin:0
}
.main{
    height:100%;
    width:50%;
    background:grey;
}
.fix{
     position:fixed;
     top:50%;
     border:red solid 2px;
     background:yellow;
     left:50%
}

DEMO