I'm working with absolute positioning within a relative div. The code is as such: http://jsfiddle.net/32mq5v6L/1/
HTML
<div id="container">
<div id="featured-posts">
<div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/star-wars-droid.jpg" /></div>
<div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/han-solo-1140x350.jpg" /></div>
</div>
<div id="other-content">
Other Content
</div>
</div>
CSS
#container { width: 100%; margin: 0 auto; background: #eee; }
#featured-posts { position: relative; width: 100%; height: auto;}
.slide { width: 100%; height: 20px; position: absolute; top: 0; }
#other-content { }
My problem is the other-content div appears underneath #featured-posts unless I apply a set height to that container, which I can't do since the goal is to make all of this responsive.
Where am I going wrong?
If you plan to have #other-content after positioned container, you will have to create new stacking context in order to move it above. One way to do it since it's not positioned is to set very little opacity:
#other-content {
z-index: 10;
opacity: .99;
}
Demo: http://jsfiddle.net/32mq5v6L/1/
Related
I changed child div's position to absolute so that it can fill up rest of the page. But now it's width doesn't match with parent body. Code is not straightforward as I am using Angular 2.
index.html
<body>
<hp-root></hp-root>
</body>
app.html
<div>
<md-toolbar class="toolbar">
<img src="../assets/logo_3x.png" class="top-logo"/>
<a class="top-link">Home</a>
<a class="top-link">Candidates</a>
<a class="top-link">Jobs</a>
<a class="top-link">Blog</a>
<a class="top-link">Login</a>
</md-toolbar>
</div>
<hp-candidate-list></hp-candidate-list>
candidate-list.html
<div class="page">
<h1>
{{title}}
</h1>
<div class="items">
<md-nav-list *ngFor="let candidate of candidates">
<md-list-item>
<img src="../../../assets/reminder-active#3x.png" class="reminder">
<span class="name">{{candidate.name}}</span>
<span>{{candidate.experiences[0].title}} at {{candidate.experiences[0].companyName}}</span>
<span>{{candidate.skills[0].name}}, {{candidate.skills[1].name}}, {{candidate.skills[2].name}}</span>
</md-list-item>
</md-nav-list>
</div>
</div>
CSS:
body {
width: 960px;
margin: 0 auto;
}
.page {
overflow: hidden;
height: 100%;
position: absolute;
background-color: gainsboro;
}
div.items {
max-width: 90%;
position: relative;
left: 5%;
right: 5%;
background-color: #FFFFFF;
}
After adding the position: absolute .page div fills up rest of the page but looks like this:
Before width was fine but it's height wasn't filling up the page.
Once you set an element to position: absolute, that removes it from the normal content flow, the size of the the element will be the size of the content inside, unless to declare the width and height, or set relevant top, right, bottom and left values.
Example of making an position absolute element to take full width of the closest container with position set other than static, or if it sits directly under body tag.
.page {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
or
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
}
EDIT
Example of making div main to fill entire height available by using flexbox.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.header {
background: gold;
}
.main {
background: silver;
flex: 1;
}
.footer {
background: pink;
}
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
I am using bootstrap, I wanted one div behind the other div, so used z-index en position: absolute and relative.
When doing this, every div under the div with z-index: 1 goes behind this div, while I want it to stay under it.
The div also becomes wider than the max-width when using 100%
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN"><h1>SHOP</h1></div>
</div>
<div class="row" id="MAINROW"> <!-- this has the background-image -->
<div class="col-md-12" id="MAINCOLUMN">
</div>
</div>
CSS:
#MENUROW
{
position: relative;
height: 80px;
background-color: transparent;
z-index: 2;
}
#MAINROW
{
position: absolute;
z-index: 1;
top: 60px; /*because there is 1 div above the menu div, this div needs to be just under that div, behind the menu div */
width: 100%;
background-image: url(../images/background.jpg);
background-size: cover;
}
when doing this the background image goes wider (to the right) than the width of the parent div.
https://jsfiddle.net/2cs60vrr/3/ example, just made the background red to show how wide it should be, the background image goes much wider
Point 1
You didn't used .container class in your HTML. Bootstrap has a structure to get it's maximum feature. You must need to use .container. Bootstrap structure is below:
<div class="container">
<div class="row">
<div class="col-*-*">
Your Content
</div>
</div>
</div>
Make your html as above to solve this issue.
Point 2
If you want not change your html, then use this code below to any .row to solve this issue.
margin-left:0;
margin-right:0;
I am sorry if we are unsure what you are looking for but is that what you want?
.grid {
margin: 0 auto;
max-width: 100%;
width: 100%;
background-color: #fff;
}
.row {
width: 100%;
margin-bottom: 0px;
display: flex;
}
#MENUROW {
position: absolute;
height: 80px;
background-color: red;
z-index: 2;
}
#MAINROW {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
max-width: 1400px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
https://jsfiddle.net/norcaljohnny/xt9c9d2r/2/
You should put the wrapper around the whole thing to position:relative;
And both rows to position:absolute;
That's it.
When using position:absolute; the block goes to the absolute top left corner of the closest parent html tag that has a position:relative;. If there is no parent with position:relative; your absolute positioned items go to the upper left corner of your screen.
(the first row is not a parent of the second, but they are siblings. The wrapper "grid" is the parent of the 2 rows)
<div class="grid">
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN">
<h1>SHOP</h1>
</div>
</div>
<div class="row" id="MAINROW">
<div class="col-md-12" id="MAINCOLUMN">
text
</div>
</div>
</div>
And CSS
.grid {
position: relative;
}
.row {
width: 100%;
}
#MENUROW {
position: absolute;
background-color: red;
z-index: 1;
}
#MAINROW {
position: absolute;
z-index: 2;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
Here is your updated example:
https://jsfiddle.net/2cs60vrr/6/
I'm trying to have an child element (something like a toolbar) of a parent element to be positiond on its bottom edge. The bahavior should be the same as using position fixed for the browser view.
I'm using absolute position right now. Everyting is perfect until the parent needs to scroll its content. Then the toolbar moves along with the rest of the parent's content.
Could somebody explain me why the toolbar moves?
Is it possible to achieve that task without need any javascript?
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 100px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
.mock {
height: 200px;
background-color: red;
}
.tool-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: blue;
}
<div class="container">
<div class="mock"></div>
<div class="tool-bar"></div>
</div>
The toolbar is inside the scrollable area, that's why it scrolled. Try this code:
HTML
<div class="container">
<div class="scroll">
<div class="mock"></div>
</div>
<div class="tool-bar"></div>
</div>
CSS
div.scroll { /* style of .container to scroll */ }
I have found an interesting fiddle that may help you. They are using position:fixed and the divs are not nested:
http://jsfiddle.net/b2jz1yvr/
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"></div>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb
}
I am trying to build an overlay (mouseover) on a image with dynamic height:
<div id="one-third">
<div class="over_menu">Text</div>
<div class="menu_bg"><img src="one.jpg" class="resp-img"></div>
</div>
CSS
.one-third { width: 33.3333%; }
.menu_bg img { width: 100%; height: auto; }
.menu_bg { position:relative; width: 100%; }
.over_menu { position: absolute; z-index:2; background-color:rgba(0,0,0,0.5); color: #FFFFFF; height: 100%; }
Unfortunately the height of "over_menu" is too large, it shows until the whole rest of the page. How else can I fix this?
Give position: relative; to the parent, so that its boundaries are within it:
.one-third { width: 33.3333%; position: relative; }
You should move the over_menu to inside menu_bg
<div id="one-third">
<div class="menu_bg">
<div class="over_menu">Text</div>
<img src="one.jpg" class="resp-img">
</div>
</div>
Of course you should change your :hover condition as well. It would be helpful if you could add a JSFiddle to your question.
I have the following markup (Fiddle Example Here: http://jsfiddle.net/9gvj11o5/8/)
<div class="header">
<div class="image">
<img src="http://placehold.it/2200x800" alt=""/>
</div>
<div class="menu">This is the menu</div>
<div class="tools">These are the tools</div>
</div>
<div class="content">content</div>
And the following CSS:
.header {
position: relative;
}
.image {
position: absolute;
}
img {
width: 100%;
height: auto;
outline: 0;
}
I need the image to be responsive and have 100% width aligned to top.
But I also need the menu and tools to be over the image and having their normal flow.
Content should be after the image, so after the header.
The image would be the "background" of the header div. (I cannot use background-image)
I am using position but the menu and tools disappear the moment I use it.
What am I missing? Do I need another wrapper div somewhere?
I would wrap the 2 divs .menu & .tools so you need only to apply z-index to the wrapper div instead of each child. which make .menu & .tools (wrapped) in front of the .image.
then change position:absolute to position:relative to .image in order to have .content below header.
Below you can see the snippet, very lightweight.
.header {
position: relative;
}
.image {
position: relative;
z-index:1
}
#menu-all {
position:absolute;
top:0;
z-index:2
}
img {
width: 100%;
height: auto;
outline: 0;
}
<div class="header">
<div class="image">
<img src="http://placehold.it/2200x800" alt="" />
</div>
<div id="menu-all">
<div class="menu">This is the menu</div>
<div class="tools">These are the tools</div>
</div>
</div>
<div class="content">content</div>
You can use z-index to define the layer order of your elements. The smaller the number, the closer to the "bottom" of the stack. So we give the img a very small number, and menu and tools a very large one.
.header {
position: relative;
}
.image {
position: absolute;
z-index: 1; /* here you can use -1 as Paulie_D points out in the comments */
}
img {
width: 100%;
height: auto;
outline: 0;
z-index: 2; /* here you can use -1 as Paulie_D points out in the comments */
}
.menu {
position: absolute;
top: 0;
left: 0;
z-index: 888; /* You can remove this declaration entirely if you set -1 above */
}
.tools {
position: absolute;
top: 0;
right: 0;
z-index: 888; /* You can remove this declaration entirely if you set -1 above */
}