fiddle
In simple case of overlap of divs
<div id='first'>
first
</div>
<div id='second'>
second
</div>
css:-
#second {
margin-top: -18px;
background: #fff;
}
How do you ensure the second div shows over the first div, with #first not visible (in overlapping region)?
I do not want to make any div position:absolute.
You will want to use z-index. Make the second one a higher z-index
Like Chausser said, use z-index and also position:relative;
http://jsfiddle.net/xreVf/4/
#second {
position:relative;
z-index:2;
}
Related
Greetings
I have serius problem, I need to move div in div in a div, but it doesn't work.
My question is if there couldn't be some problems with negative margins or child element of element with margin problem.
It seems negative margin is collapsing with positive margin in child element.
The margin of child element is moving parrent element.
here is fiddle
of my problem.
What I want to achieve is that:
a. Article div is overlaping main heading, I tried to avoid using absolute position, so I went for negative margin.
b. Text is margined inside of an article div. From top.
<div class="container">
<div class="main-heading"><h1>Main Heading</h1></div>
<div class="wraper">
<div class="article">
<div class="text"><p>Text</p></div>
</div>
</div>
</div>
Also here is some of problem in css:
div {
width: 100%;
}
.container {
}
.heading {
}
.wraper {
margin-top: -100px;
height: 500px;
}
.article {
margin-top: 0;
height: 200px;
}
.text {
margin-top: 120px;
height: 50px;
}
As I said, margin of text element seems to move article element from top as well. It's me or where is the problem, and what's the solution or workaraund? Preferably even without absolute position, but if you really need to use them, don't worry, but clear it somehow so it can be used as part of column and wont interact with upper/bottom content.
Thank you verry much for your time
edit: picture of what I want to achieve
That black rectangle is wrapper,
cat is article
text is text, but the margins move whole article now.
I found a related toppic on this, it happens in all mayor browsers, and there is a simple solution on that. There is a must to use overflow attribute in CSS...
I used
overflow: auto;
On parrent element, and it worked.
Based on your comment and what I think you're asking:
<div class="image">
<p>PRESTO</p>
</div>
.image {
display:block;
position:relative;
background-color:grey;
width:300px;
height:200px;
}
p {
display:none;
position:absolute;
top:0;
width:100%;
text-align:center;
color:orange;
font-size:2em;
}
.image:hover > p {
display:block;
}
FIDDLE:
https://jsfiddle.net/su5aqs3p/2/
i want to make a slideshow and it should look like this.
but what i have is this . preview
as you can see the problem is left side arrow [rig_arrow] is invisible and i know it's underneath of main div.i want to know how can i modify codes to visible both divs.
this is the code
html
<div class="arrow" id="rig_arrow">></div>
<div class="arrow" id="main"></div>
<div class="arrow" id="lef_arrow"><</div>
css
.arrow{
float:left;
}
#main{
width:200px;
height:50px;
background-color:rgb(153,153,153);
}
#rig_arrow{
background-color:rgb(204,204,204);
width:20px;
margin-right:-20px;
}
#lef_arrow{
background-color:rgb(204,204,204);
width:20px;
margin-left:-20px;
}
The problem is that the divs stack on top of each other in the order they appear in the DOM. You could change the order by putting #main first, but then you'd need something different than just float: left.
Another trick to change the layer order is to use position: relative on the right arrow:
#rig_arrow{
background-color:rgb(204,204,204);
width:20px;
margin-right:-20px;
position: relative;
}
Example: https://jsfiddle.net/ykLjy4L2/1/
See the fiddle
No need to change your markup..Just add the below css..
Add
position: relative;
to your CSS for #rig_arrow and #lef_arrow or add these two styles to .arrow.
Before giving negative vote or placing the question as duplicate, please read the issue first.
I'm having some issue with putting one div under another. I know that make people have asked this question here and I've read all of them and also tried everything out, but none of them worked for me.
Everyone days to give position: relative to to div and then give one higher z-index and another lower. None of them worked for me. So, I'm here for help.
In my project (http://loadtest.isaumya.com/) I have 2 divs i.e.
<body>
<div class="conteiner">blah blah blah</div>
<div id="particle-js"></div>
</body>
I want to put the <div id="particle-js"></div> behind of container, but nothing is working out. So please help.
You have ordered them badly:
<div class="container">...</div>
<div id="particles-js">...</div>
invert positions:
<div id="particles-js">...</div>
<div class="container">...</div>
makes sense since you want your full-screen canvas particles to be naturally z-index lower than the latter #container. Precedence rule.
also add this styles to your particle-js element:
#particles-js{
position:absolute;
top:0;
width:100%;
height:100%;
}
If the above still does not helps (it should) add:
.container {
position: relative;
z-index: 1;
}
Make your canvas element display:block;
Result image:
its just a very simple concept you need to remember about position in css
A relative positioned element is positioned relative to its normal
position
An absolute position element is positioned relative to the first
parent element that has a position other than static.
JSFiddle
this is how you may solve this problem:
<body>
<div class="container">blah blah blah</div>
<div id="particle-js"></div>
</body>
and the css
div {
width: 100px;
height: 100px;
}
.container {
position: absolute;
background-color: blue;
z-index: 1;
}
#particle-js {
position: absolute;
background-color: red;
}
make the z-index higher to wichever element you want a be displayed at the top
I was wondering if someone could explain to me why this is happening. Sorry I am new to CSS/HTML. I am working on creating and HTML layout for a basic page, currently I have three Divs. I want one container on the left (id= leftside) with 50% width and another on the right (id=rightside) with 50% width and the third container (id=narrow) below both of them at 100% width.
So currently my third div gets hidden underneath the first two unless I add the property 'top: 50%;' to that div. Can someone please explain why this is happening? I thought that since the space is already taken by my other two divs that I would not have to use the 'top' property in order for the third div to display. Why is it being hidden by the other divs?
Here is my HTML code:
<body>
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</body>
Here is my CSS code:
#leftside{
width: 50%;
height: 50%;
background-color: blue;
float:left;
}
#rightside{
width: 50%;
height: 50%;
background-color: red;
float:right;
}
#narrow{
width:100%;
height:20%;
background-color:black;
}
Whenever you do use the float for the element then don't forget to clear them.
For easier I always use overflow:hidden; to the parent div:
<div class="parent">
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</div>
.parent{overflow:hidden;}
So now, you know the key reason of hiding?
Because the first two divs have set floats so they are taken out from the "normal" flow, while the last remains the same and isn't affected by the previous two.
To be affected you can either set float also to the last element, or clear the float.
#narrow {
width:100%;
height:20%;
background-color:black;
clear: both;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/float#Clearing_floats for more info.
I always create a spacer div and use it whenever I need to clear any previous floats or coding. This is specially useful when I have a ton of divs within a parent div.
.spacer {
clear:both;
border:none;
width:100%;
}
*other divs above*
<div class="spacer"> </div>
*other divs below*
The currency area (#currencySelect) on the top left stops dropping down when it's floated left, as it is now. - http://trendy-menswear.myshopify.com/
Relevant HTML:
<div id="currencySelect" />
<header id="top" class="clearfix" />
Relevant CSS:
#currencySelect {
float: left;
}
#top {
position: relative;
z-index: 100;
}
When I remove the float the dropdown functions again.
Any pointers on how to position it where it is currently but have it function?
The quickest solution would be to add:
#currencySelect {
position:relative;
z-index:101
}
Currently the #top <header>, having a z-index: 100, is positioned over the #currencySelect <div> as the latter is removed from the normal layout flow due to floating.
When you apply the float:left; it enters under the header. So you can't click it.
Use position: absolute;z-index: 101; rather than float:left;.
the z-index of header#top is 100, covering this , give it an even higher z-index.