I'm trying to make this gray bar tuck underneath the purple div in the background using z-index in CSS (then pull out with JavaScript when a button is clicked... but that works!).
This is what it looks like now:
The HTML for the area looks like this:
<div id="body">
<div id="container">
<header>
... header content ...
</header>
<div id="pullBar">
... pullBar content ...
</div>
</div>
</div>
And this is what the CSS for #pullbar and #body look like:
#pullBar{
padding:7px 15px;
height:108px;
width:90%;
background:#BCC6CC;
margin-left:-90%;
position: relative;
z-index: 1;
}
#body {
width: 100%;
margin: 0;
background:#401445;
position: relative;
z-index: 5;
}
Thanks!
Tge reason is that the pullbar div inherits the same z-index as the body.Make the pullbar same level as body...
<body>
</body>
<div id="pullbar">
</div>
This code is ok. But it is not recommended to make the pullbar div as the same level as the body.
Use another div like.some main div in place of body and then make the pullbar div in level with the main div
The z-index is nested because of the relative elements (which are nested as well). So you could either move the pullbar to the same level as #body:
<div id="body">
<div id="container">
<header>
... header content ...
</header>
</div>
</div>
<div id="pullBar">
... pullBar content ...
</div>
Or you could use absolute positioning on the pullbar to place it in a 'new' layer, so the z-index will be at the same level as #body too.
Have a look here as well: z-index on absolutely positioned nested elements
Related
Given this example:
<div class="main">
<div class="container">
<div id="banner-message">
<p>I want to be hidden</p>
<p id="el">I want to be visible</p>
</div>
</div>
</div>
the .main and the .container have position:relative, the #banner-message and the #el have position: absolute because I need to move them around inside the .container which has overflow: hidden with the purpose of hidding all elements that overflow, except the #el, and here is my question:
Given this structure and positioning is it possible to make only #el visible when it overflows the .container?
heres's a fiddle as repro:
https://jsfiddle.net/k5w6stuL/
I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.
I'm creating a website and I want each section to take up the full screen. I have:
html, body {
height: 100%;
width: 100%;
margin: 0;
}
and each section has 100% height and width and relative position. Inside the second section, I want to create four divs that take up each corner. They share a class which has height and width 50% and absolute position. I tried to position them individually by selecting each id and giving them top:0 left:0, top:0 right: 0, and so on.
The problem is, the left and right positioning works, but when I try to position the top or bottom, the div will go to the top or bottom of the first section instead of the second. I think it might be an issue with having two 100% divs on top of each other, but I'm not sure. Would really appreciate any advice!
After see your fiddle, i see you wrote wrong the word "position" in class ".work", beside you can add an div clear between two divs ".hero" and ".work", it will work
<!--==== HEADER =============================================-->
<div class="header">
<div class="container">
<ul>
<li>Home</li><!--
--><li>Work</li><!--
--><li>About</li><!--
--><li>Contact</li>
</ul>
</div><!-- container -->
</div><!-- header -->
<!--===== HERO =============================================-->
<div class='hero' data-type="background" data-speed="10">
<div class='name'>
<h1>kdjfkd</h1>
<h2>fdasfdr</h2>
<h2><span >fgafd</span></h2>
</div>
</div><!-- hero -->
<div style="clear:both"></div>
<!-- ============= WORK ================== -->
<div class='work'>
<div class="same2" style="background-color:red; top:0;left:0"></div>
<div class="same2" style="background-color:yellow; top:0;right:0"></div>
<div class="same2" style="background-color:white; bottom:0;left:0"></div>
<div class="same2"style="background-color:green; bottom:0;right:0"></div>
</div>
.work{
height: 100%;
width: 100%;
position: relative;
}
Demo
Edit: not need "clear:both" at all, it still work fine
I've got div that I need to be fixed. Now I want to create two sub-divs inside that div. Is it possible?
What I am trying to get is:
div { position: fixed; }
---------------------
- sub-div1 { position: ??? }
- sub-div2 { position: ??? }
---------------------
I tried another position properties but haven't got that yet.
UPD: solved.
Depending on your inner positioning requirements, either relative or absolute,,, both 'consider' parents position / offset .. -> http://www.w3schools.com/Css/css_positioning.asp
You can definitely nest divs inside of divs.
<div id="div1">
<div id="div2">
</div>
<div id="div3">
</div>
</div>
There are 3 different kinds of positioning absolute, relative and fixed. If you position something as fixed, its positioned relatively to the browser window. Anything else you position inside of that div will be located within, unless its positioned with absolute or something I believe, but that would only be visual, technically in the page structure it would still be inside. But here's an example you can save and try, its by no means an example of style btw.
<html>
<head>
<style>
#div1{
left: 100px;
top:150px;
position:fixed;
background:red;
padding-bottom:10px;
}
</style>
<body>
<div id="div1">
heellloooooooooooooooo<br><br><br><br>
<div style="float:left;background:yellow;">
woooooooooorld
</div>
<div style="float:right;background:blue;">
hahahahahah
</div>
</div>
</body>
</html>
If you zoom out my website, the structure of the header looks bad. I don't know what to do about this. This is the link of my website. This is the CSS and HTML structure. Hope you can help me, I really need help :(
If you want you header to stay in the centre with your content, you will need t do that, it doesn't just happen.
You should start by agreeing on a width you want you content in (you have width: 1100pxon your container div, so I'll go with that for you.)
In you css for .containerchange width: 1100px; to max-width: 1100px.
Then in the css for #header remove the position: absolute;. Add in max-width: 1100px; margin: 0 auto;
You will need to modify the structure of your HTML and place the header div inside the container div. Currently, that part of your HTML is like this:
<div id="header"></div>
<div id="container">
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
but it should be like this instead:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
After modifying your HTML, you can add the following CSS to your stylesheet:
#header {
margin-left: -100px;
}
your header is positioned absolute
so when you zoom in and out it will stay absolute positioned. In the top left corner when the page is zoomed out
Also you do not have a wrapper for your code.... you may want to wrap everything in a container,
This will also take care of the image size thats over lapping your other content.
I do not know id you wanted the header to overlap like that but if it was intended just use margin-left
a wrapper will also contain your other divs sizes to stay within that wrapper.
Not going to work with zooming in and out
#header {
position:absolute;
z-index:101
}
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="underheader">
</div>
</div>
</body>
css
#wrapper{
width:800px;
} or whatever width you want
#header{
maegin-left:50px;
} or whatever px you desire