I am trying to make a div fixed on the top but looks like the layer overlaps.
CSS:
#fsancy {
background-color:#ddd;
position: fixed;
display: block;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px; /*half the width*/
}
HTML:
<div class="container" id="fsancy">
<div class="row">
<div class="col-lg-12 text-center fluid fixme" id=""
style="background-color: #ff0033; max-width: 100%; color: #ffffff; font-size: xx-large">Share £200 With A
Friend
</div>
</div>
Picture example
Fixed position elements are not part of the regular document flow, so in your particular case you have to add some margin-top to the first regular element which is high enough to avoid the overlap / fit under the fixed header.
#Michelbach Alin, use position absolute and z-index properties for fix as a layer.
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Reference.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
I want to position my button on the bottom of a div or the bottom of the screen (but in a non-fixed position). My code structure looks like this:
div-1
div-2
div-3
button
I want to put the button at the bottom of div 1, which height is set using jQuery (The height is the height of the screen, so putting the button at the bottom of the screen may also be a solution)
What I've tried so far:
CSS
.button {
position: fixed;
bottom: 10px;
left: 50%;
margin-left: -104.5px; /*104.5px is half of the button's width*/
}
This centers the button (what I want) and it places it at the bottom of the screen, but the position is fixed, so if I scroll down the button goes down aswell.
I've also tried setting the button's position to absolute and div-1's position to relative, this didn't work either.
Edit: The div's height is variable, so margins may not be such a good option
just do the button position:absolute without putting the div relativ
.button {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -104.5px; /*104.5px is half of the button's width*/
}
.test{
height:1000px;
}
<div class="test">
<div>
<div>
<button class="button">
test
</button>
</div>
</div>
</div>
Try using VW instead of px.
HTML:
<button class="button">TEST</button>
CSS:
.button {
position: fixed;
bottom: 10px;
left: 47vw;
width: 6vw;
}
EDIT:
HTML:
<div class="div">
<button class="button">TEST</button>
</div>
CSS:
.div{
position: relative;
border: 1px solid black;
width: 500px;
height: 250px;
}
.button {
position: absolute;
bottom: 5px;
left: 50%;
width: 50px;
margin-left: -25px;
}
I was looking the code instead of the question so i forget that the real question was add the button on the bottom of div or screen.
The parent div has to be position: relative; and the button position: absolute;
if width div 50% then left must 25% if width div 70% then left must 15%
.center{
position:fixed;
bottom:20px;
left:20%;
width:60%;
}
.center .btn{
background:red;
width:100%;
color:white;
font-weight:bold;
border-radius: 64px;
padding:10px;
}
<div class="center">
<button class="btn">Login</button>
</div>
I believe these Stack Overflow posts might be of help to you:
1) How do I get a div to float to the bottom of its container
2) HTML/CSS positioning float bottom
If this doesn't help can you please also provide your HTML code.
You should use position: absolute on your button when parent element height and width is 100% (of document or page).
<div class="div-1">
<div class="div-2">
<div class="div-3">
<button>
Just a button
</button>
</div>
</div>
</div>
and css with little reset:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.div-1 {
position: relative;
height: 100%;
width: 100%;
}
.div-2, .div-3{
width: inherit;
height: inherit;
}
button {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
Here is JSfiddle
Here is the responsive width:
position: absolute;
bottom: 23px;
left: 10%;
width: 80%;
Here is the HTML I am working with.
<div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;">
<div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;">
<div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div>
</div>
</div>
What I would like to happen is for the inner div to occupy 50% of the space given to its parent div(outer). Instead, is is getting 50% of the space available to the viewport, which means that as the browser/viewport shrinks in size, so does it.
Given that the outer div has min-width of 2000px, I would expect the inner div to be at least 1000px wide.
Specifying a non-static position, e.g., position: absolute/relative on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/
See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Positioning_contexts
We can change the positioning context — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the element's ancestors.
#outer {
min-width: 2000px;
min-height: 1000px;
background: #3e3e3e;
position:relative
}
#inner {
left: 1%;
top: 45px;
width: 50%;
height: auto;
position: absolute;
z-index: 1;
}
#inner-inner {
background: #efffef;
position: absolute;
height: 400px;
right: 0px;
left: 0px;
}
<div id="outer">
<div id="inner">
<div id="inner-inner"></div>
</div>
</div>
Use position: relative on the parent element.
Also note that had you not added any position attributes to any of the divs you wouldn't have seen this behavior. Juan explains further.
I have a layout with a vertical scroll. One of the child elements within the scrollable div is absolutely positioned with a large top value, inducing a vertical scrollbar on the parent.
The scrollable parent div also has some child div elements (lets call them pillars) positioned horizontally adjacent to each other via position: absolute and some left value.
Here's the HTML markup:
<div id="root" style="height: 250px; position: relative;">
<div class="stretch">
<div id="container" class="container">
<div id="pillar1" style="left: 0.0%; width:33.25%;" class="pillar" ></div>
<div id="pillar2" style="left: 33.05%; width:33.25%;" class="pillar" ></div>
<div id="pillar3" style="left: 66.05%; width:33.25%;" class="pillar" ></div>
<div id="fixed-and-not-movable" style="background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;">
</div>
</div>
and the CSS:
.stretch {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute;
height: auto;
width: auto;
}
.container {
border: 2px solid;
bottom: 0;
left: 0;
right: 0;
top: 0;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
}
.pillar {
border: 1px dotted red;
bottom: 0;
height: 100%;
position: absolute;
top: 0;
}
I want the pillar divs to capture the entire scroll height of the parent "container". Right now their height is the parents client height (not scroll height). So when you scroll down you will notice the pillars are not filling all the available height inside the overflow:scroll.
Can someone suggest changes to CSS classes (.container and/or .pillar) to make this work.
Here's a link to js fiddle showing the same problem:
http://jsfiddle.net/AshwinPrabhuB/2o5whkmq
Thanks!
After a lot of experimenting and hair pulling, I finally figured out that there is no perfect CSS solution to this problem. I would love it if someone can prove me wrong.
The problem as I understand it is, there is no way via pure cross browser compatible CSS for a child element to vertically stretch 100% to fill its parents scrollHeight, if the parents height is not explicitly defined.
So with the above conclusion, I have worked around the problem by placing a explicitly sized div under the scrolling container and setting a explicit min-height on the pillars. I can calculate the height of this new go-between div via JavaScript.
Here's the modified HTML markup (only the fixedMinHeight div is new)
<div id="root" style="height: 250px; position: relative;">
<div class="stretch">
<div id="container" class="container">
<div id="fixedMinHeight" class="stretchFixed">
<div id="pillar1" style="left: 0.0%; width:33.25%;" class="pillar" ></div>
<div id="pillar2" style="left: 33.05%; width:33.25%;" class="pillar" ></div>
<div id="pillar3" style="left: 66.05%; width:33.25%;" class="pillar" ></div>
<div id="fixed-and-not-movable" style="background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;">
</div>
</div>
</div>
and the CSS (.stretchFixed is an addition from earlier)
.stretch {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute;
height: auto;
width: auto;
}
.container {
border: 2px solid;
bottom: 0;
left: 0;
right: 0;
top: 0;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
}
.pillar {
border: 1px dotted red;
bottom: 0;
height: 100%;
position: absolute;
top: 0;
}
.stretchFixed {
min-height: 375px;
position: relative;
height: 100%;
}
Here's the fiddle link with the changes: https://jsfiddle.net/AshwinPrabhuB/2o5whkmq/10/
Alternatively, the same scheme can be applied on each individual pillar thereby not necessitating DOM insertion.
I would love to be proved wrong, but for time being I can live with this workaround.
The div .pillar is given position:absolute , so it is not taking height according to it's parent i.e, .container.
Simply remove position:absolute from css of .pillar.
Here is the FIDDLE.
Changes in CSS:
.pillar {
border: 1px dotted red;
bottom: 0;
height: 100%;
float:left;
/*position: absolute;*/
top: 0;
left:0 !important;
width:32% !important;
}
I have given a width of 32% because the borders currently used won't let it fit in the given width. Also, there is no need to specify the values for left explicitly for each of the pillars now. So I have just overridden these values.
EDIT:
I understood it wrong. Now here's the corrected one.
Give height of the pillar as 100vmax.
This unit will give it 100/100 size of the viewport, as I understood. Although the log is still showing unmached values for the heights. But I guess this is close enough. Also, the blue box is coming in it's way.
Check the FIDDLE.
.pillar {
border: 1px dotted red;
bottom: 0;
height: 100vmax;
float:left;
/*position: absolute;*/
top: 0;
left:0;
width:32%;
}
here are the solutions in my mind.
I think you have to either add a wrapper div inside the container like this:
<div id="container" class="container">
<div style="height:400px;">
<div id="pillar1" class="pillar" ></div>
<div id="pillar2" class="pillar" ></div>
<div id="pillar3" class="pillar" ></div>
<div id="fixed-and-not-movable">
</div>
</div>
Or you have to add specific height to all the pillars.
This is because you are using height:100% on the pillar. So it's matching the closest element that has a height specified.
In addition, I don't know if it is because of your scenario requirement that you have to add that .stretch div. For this case, you don't need that div at all. The code below does the same thing as yours.
<div id="root">
<div id="container" class="container">
<div style="height:400px;">
<div id="pillar1" class="pillar" ></div>
<div id="pillar2" class="pillar" ></div>
<div id="pillar3" class="pillar" ></div>
<div id="fixed-and-not-movable"></div>
</div>
</div>
</div>
The best approach to get the max-height possible of the parent is to make its position fixed or absolute and instead of providing a height value you set the top attribute to zero and the bottom attribute to zero.
.parent {
position: relative;
.child {
position: fixed; // or absolute
top: 0; // anchors element to the top
bottom: 0; // anchors element to the bottom
}
}
I'm trying to vertically center text inside a div that is positioned absolutely.
I have tried table-cell approach with no luck. This is a responsive layout, so I'm trying to avoid setting fixed heights and prefer not to use Javascript either.
Thanks
Link to jsbin demo
HTML & CSS:
<div class="page-banner" style="background: url(http://www.bimga.com.php53-3.ord1-1.websitetestlink.com//wp-content/uploads/BIMGA_Website_InteriorPage_Banners_About.jpg) no-repeat scroll 0 0 / cover transparent">
<img style="visibility:hidden" src="http://www.bimga.com.php53-3.ord1-1.websitetestlink.com//wp-content/uploads/BIMGA_Website_InteriorPage_Banners_About.jpg">
<div class="left">
<div class="page-banner-text">this text needs to be verticall centered</div>
</div>
</div>
<style type="text/css">
.page-banner {
margin-bottom: 35px;
list-style: none;
width: 100%;
padding-left: 0;
position: relative;
}
.page-banner img {
width: 100%;
height: auto;
}
.page-banner .left {
background-color: rgba(10, 65, 142, .75);
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 100%;
text-align: center;
width: 50%;
}
</style>
We could use a transform like so:
Have a jsBin!
CSS
.page-banner-text {
top: 50%;
transform: translateY(-50%);
position: absolute;
}
More information on this technique.
What you can do is, set the text position to absolute.
Then give it a top: 50%; and give it a top margin of minus half its height.
I would not prefer using position absolute and top: 50% for better multi browser support (espesially on older IE versions) so I would prefer adding line-height: x em; in your .page banner class. Em because you have defined the height by % so it needs to always be on the center no matter the actual pixel height.
.page-banner .left:after {
content: "Background text";
position: absolute;
top: 40%;
left: 35%;
z-index: -1;
}
Here is the HTML I am working with.
<div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;">
<div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;">
<div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div>
</div>
</div>
What I would like to happen is for the inner div to occupy 50% of the space given to its parent div(outer). Instead, is is getting 50% of the space available to the viewport, which means that as the browser/viewport shrinks in size, so does it.
Given that the outer div has min-width of 2000px, I would expect the inner div to be at least 1000px wide.
Specifying a non-static position, e.g., position: absolute/relative on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/
See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Positioning_contexts
We can change the positioning context — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the element's ancestors.
#outer {
min-width: 2000px;
min-height: 1000px;
background: #3e3e3e;
position:relative
}
#inner {
left: 1%;
top: 45px;
width: 50%;
height: auto;
position: absolute;
z-index: 1;
}
#inner-inner {
background: #efffef;
position: absolute;
height: 400px;
right: 0px;
left: 0px;
}
<div id="outer">
<div id="inner">
<div id="inner-inner"></div>
</div>
</div>
Use position: relative on the parent element.
Also note that had you not added any position attributes to any of the divs you wouldn't have seen this behavior. Juan explains further.