I am trying to absolutely position a child in a child in a flexbox.
The problem is that element jumps its parent and aligns instead to the grandparent. I know that this is a flexbox issue as it works fine outside of the flexbox.
Maybe this pseudo will help clear things up:
<div style="display: flex; width: 100%;">
<div style="position: relative; width: 100px; height: 100px;">
<button style="position: absolute; top: 0px; right: 0px;">X</button>
</div>
<div>This is irrelevant.</div>
</div>
The button should be in the upper-right corner of its parent div, but instead it gets positioned to the middle of the screen.
Is there a right way (or hack) to fix this?
EDIT: I have tried and tried again to duplicate the problem here in the code snippet to no avail (in the original post I didn't test the pseudo code -- just assumed it would reproduce). This leads me to believe that the the problem lies somewhere else in my code. I apologize for not testing further before posting. Because of this I cannot accept an answer.
This should do it. Absolutely positioned divs / elements will always search for the nearest parent position relatives to line up with. In this case you just need to move it to the grandparent, not the parent.
<div style="display: flex; width: 100%; position: relative;">
<div style="width: 100px; height: 100px;">
<button style="position: absolute; top: 0px; right: 0px;">X</button>
</div>
<div>This is irrelevant.</div>
</div>
Cut the position: relative; from the second div and move it to the parent div the one has flex. Then the absolute element will work based on the parent div and will be on the top-right-side, please see the snippet below-
<div style="display: flex; width: 100%; background: #ccc;position: relative;">
<div style="width: 100px; height: 100px;">
<button style="position: absolute; top: 0px; right: 0px;" >X</button>
</div>
<div>This is irrelevant.</div>
</div>
Related
I have following code (example):
<div style="position: fixed">
<div id="AAA" style="position: absolute; background-color: green; z-index: 1">AAA</div>
</div>
<div style="position: relative">
<div id="BBB" style="position: absolute; background-color: red; z-index: 0">BBB</div>
</div>
For me it looks like AAA div should be shown over BBB div, because:
they both have position specified and this position supports z-index
AAA z-index (1) is higher than BBB z-index (0)
But in result HTML, BBB is shown over AAA. Why? Are there any document describing this behavior?
Because a position and z-index on the parent starts a new stacking order. Specifically position: fixed on the first element. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
A stacking context is formed, anywhere in the document, by any element in the following scenarios:
...
Element with a position value "fixed" or "sticky" (sticky for all mobile browsers, but not older desktop).
So the child z-index of the first div is relative to the parent, not the rest of the document.
In this example, you want to apply z-index to the parent instead.
<div style="position: fixed; z-index: 1;">
<div id="AAA" style="position: absolute; background-color: green; z-index: 1">AAA</div>
</div>
<div style="position: relative;">
<div id="BBB" style="position: absolute; background-color: red; z-index: 0">BBB</div>
</div>
Below I have some HTML code. Everything is positioned relative apart from contentRow which is positioned absolutely. This is making the footer stick to where the browser window ends and not where the scroll bar ends.
Is there any way I can make the footer go down to the very bottom where the scroll bar ends.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative">
<div class="globalHeader">
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute">
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative">
</div>
</div>
Theres a few available flavours of the solution for this but they basically go something like this.
EXAMPLE
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
a point to remember is that height of elements in html are always passed through the parent. so if you dont define height 100% on a parent the child won't know either. Good luck and let me know if you have any other issues :)
SOURCE
http://mystrd.at/modern-clean-css-sticky-footer/
If I'm understanding correctly, you could make s4-bodyContainer position:relative so that the contentRow is only positioned absolutely within that container. Then footer would go below the bodyContainer.
I'm having a problem overlaying an element inside a bootstrap progress bar.
The icons are overplayed on the partly filled progress bar, but on the full progress bar the icons aren't displayed.
You can achieve the desired result by applying the following code to the progress element and the div containing your icons.
Apply position: relative; to the .progress element styles:
<div class="progress" style="position: relative;">
Apply position: absolute; top: 0; right: 7px; to the div element wrapping the icons:
<div style="position: absolute; top: 0; right: 7px">
<!-- icon elements -->
</div>
Full example solution (taken from your code and modified):
<div class="progress progress-striped active" style="background: #ddd; position: relative;">
<div class="progress-bar progress-bar-danger" style="width: 100%; float: left;"></div>
<div style="position: absolute; top: 0; right: 7px;">
<span class="glyphicon glyphicon-info-sign"></span>
<span class="glyphicon glyphicon-new-window"></span>
</div>
</div>
Hope this helps you :)
The icons is display even in full progress bar, but the icons is overwritten by progress bar. You can fixed it by create your own CSS and add z-index: 0; in your icons style
.modal-footer span{
z-index: 0;
}
They are using float left... So the bar pushes them.
Try using absolute position on the div that holds the icons.
I know how to center a div layer with respect to it's wrapper or parent container, but what about When I have a div inside of a div inside of the page body. How do I center the smallest div with respect to the body?
<div id="1" style="width: 100%">
<div id="2" style="width: 22.5%; height: 1000000000px; margin-left: 12%;">
<div id="3" style="position: absolute;">
</div>
</div>
</div>
In the above example, How can I center div with id="3" in respect to div with id="1"?
#1 must be position: absolute, #3 set left: 50% and offset half the width to the left
#d1 {
position: absolute;
}
#d3 {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
JSFiddle for playing.
I have moved the inline styles to the CSS panel and changed the ids to d1, d2 and d3 respectively.
set marging:0 auto for div id=3
div#2 {
position: relative;
}
div#3{
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This will center the div#3 not only horisontaly but vertically to div#2, if you are asking that. And keep in mind you can't have digits for id.
If you want to center div#3 to div#1 ... you just have to move the position:relative style from div#2 to div#1 .
If you want it positioned exactly in the screen's center, you need to enclose ID#3 inside 2 divs, one that takes care of vertical alignment, and the other takes care of horizontal alignment:
<div id="vertical">
<div id="horizontal">
<div id="3" style="position: absolute;">
</div>
</div>
More details are here: dead-center
I have following HTML+CSS markup:
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><img src="slide-01.jpg"></div>
<div style="position: absolute;"><img src="slide-02.jpg"></div>
<div style="position: absolute;"><img src="slide-03.jpg"></div>
</div>
Notice that the slides are absolute-positioned inside a relative-positioned element so that the top-left corners of all slides are aligned together. All slides are equal height, but the height is not pre-determined hence this problem: the "protofade" div does not have a height. Is there any CSS trick that can make this div as tall as the first slide without explicitly specifying height: NNpx.
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
<div style="visibility:hidden;"><div style="width: 200px; height: 50px; background: red;"> This should be a second copy of slide one </div></div>
</div>
The above code shows your original code (except with divs, as per Scott Brown, above), with the addition of a second copy of "slide 1", positioned with the default algorithm, but with its box hidden. Accordingly, it's container, protofade, has to be large enough to accomomdate the box, even though the box is not displayed.
There is a jQuery answer to this. I don't believe this can be done through CSS as you need to be able to get the height of the first div.
I've illustrated it here: http://jsfiddle.net/thewebdes/FHgz5/
For reference, here's a run down of the code:
HTML
<!--
using DIVs in place of IMGs
setting height to these DIVs, all equal as specified
-->
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
</div>
CSS
/* border set to show height given to DIV */
#protofade { border: 5px solid #000; }
JS
// CSS height set based on the height of the first DIV
// First DIV chosen as all heights will be the same anyway so it shouldn't matter.
$('#protofade').css("height", $('#protofade div:eq(1)').height());