React JS, implement one div over another using flexbox layout only.
- Is that possible to impl the layout in the picture below without using
position:'absolute', only usingflexboxlayout. - Or there are more elegant solution in React JS ?
Asked
Active
Viewed 3,047 times
2
Shawn Wang
- 2,314
- 1
- 16
- 19
-
This isn't related to react at all, really. – Evan Trimboli Nov 05 '17 at 13:48
-
1We don't write up code here at SO, so post your own effort and we'll see how we can help – Asons Nov 05 '17 at 13:48
-
2Flexbox is not designed for overlapping. But CSS Grid is. https://stackoverflow.com/q/43919067/3597276 – Michael Benjamin Nov 05 '17 at 13:49
2 Answers
2
There isn't other ways I can think of except of calc()
<div style="display: flex; height: 200px; align-items: center;">
<div style="flex: 0 0 100%; height: 100%; background-color: grey;"></div>
<div style="width: 30%; height: 60%; margin-left: calc(-50% - (30% / 2)); background-color: red;"></div>
</div>The support for calc() http://caniuse.com/#feat=calc is pretty good now
Note that 30% in margin-left is the width of the overlay element, if the element's width is let say 30px, change the 30% in margin-left to 30px
AngYC
- 3,051
- 6
- 20
-
Sorry, I don't really understand what you mean, do you mean overlapping neighbour element like this? `` – AngYC Nov 05 '17 at 13:59
-
To my extent there isn't a way to do it unless you use the trick of `calc()`, edited my answer – AngYC Nov 05 '17 at 14:38
