Rearrange Positions Purely by CSS

Question

I've been Googling and looking for a way to position elements with CSS, but I'm having trouble solving a problem.

A good example of what I'm trying to do is:

I have two divs,

<div class="A"></div>
<div class="B"></div>

I want to use CSS to display div class B above div class A. My question is: Is it possible to use solely CSS to display B on top of A without changing the HTML? Or is the only way to display B on top of A to put the div HTML for B above that of A?

If the content of `B` isn't a fixed size, it's not possible. So is it? — Henrik Ammer, Jan 07 '13 at 07:12
Its not possible you can use jquery or javascript to get this — Dineshkani, Jan 07 '13 at 07:14
The content is just some text. A date or a title. Are you asking if B has a CSS specified height and width? — Mister R2, Jan 07 '13 at 07:14
@Dinesh: Could you help me with a link or an example I can look at to do this? — Mister R2, Jan 07 '13 at 07:16
Yes. If `B` has a specified height you can do something like has been answered below. Set `B` to `top: 0px;` and `A` to `top: Xpx;` Where X is ofcourse the height of the content in `B`. — Henrik Ammer, Jan 07 '13 at 07:18
I see the exact problem you brought up, @Henrik. I did indeed have variable-length contents for the divs so I ended up JavaScripting the content height and inserting CSS rules to position A and B. Thank you for pointing that out -- it helped me recognize that problem and keep working. — Mister R2, Jan 08 '13 at 23:03

score 1 · Answer 1 · answered Jan 07 '13 at 07:16

1

here is your answer,

.a, .b { position: absolute;
}
.a {
top:50px;
}

answered Jan 07 '13 at 07:16

naresh kumar

2,165
3
19
21

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

You can use a css like this

.A,.B{
width: 48%;
float: right;
}

.A {
background-color: #ffa;
}

.B{
background-color: #0f0;
}

Demo See this for Reference

edited May 23 '17 at 12:12

Community

1
1

answered Jan 07 '13 at 07:31

Dineshkani

2,899
7
31
43

Панайот Толев · Answer 3 · 2013-01-07T07:29:31.277

It is possible, but it depends on what are you trying to achieve. And still the best way will be to simply put the B div in front. The other way is with positioning. position:absolute on both will work fine, but you need to know the exact width and height of the elements. If for example both has height: 50px and width: 50px your code will look like that:

.a {
height: 50px;
width: 50px;
position:absolute; 
top: 50px;
left: 0;
}

.b {
height: 50px;
width: 50px;
position: absolute; 
top: 0px;
left: 0;
}

The other way is with margin minus for element B.

.a {
height: 50px;
width: 50px;
margin-top: 50px;
}

.b {
margin-top: -100px;
height: 50px;
width: 50px;
}

score 0 · Answer 4 · answered Jan 07 '13 at 07:24

0

use this

.B{

margin-top:-50px;
}

answered Jan 07 '13 at 07:24

Pawan Lakhara

1,146
4
16
28

score 0 · Answer 5 · edited May 23 '17 at 12:04

0

The way to do this is :

#wrapper { 
     position: relative; 
     }

    #firstDiv { 
     position: absolute; 
     height: 100px; 
     top: 110px; 
     }

    #secondDiv { 
     position: absolute; 
     height: 100px; 
     top: 0; 
     }

For more ways try this

edited May 23 '17 at 12:04

Community

1
1

answered Jan 07 '13 at 07:25

Surinder ツ

1,778
3
16
27

Rearrange Positions Purely by CSS

5 Answers5