iam facing a small issue with overlapping .
Consider this html snippet
<html>
<head>
div
{
width:100%;
height:100px;
}
img
{
width:100%;
}
#div2
{
margin-top:-100px;
}
</head>
<body>
<div id="div1">
<img src=""/>
</div>
<div id="div2">
some text
</div>
</body>
</html>
I want to overlap a div2 over div1. As the code will overlap since margin-top of div2 equals height of div1. My problem is image is overlapping div2. What is the reason of this behaviour ?
And i don't want to give position absolute to the elements since this code will break the layout of the page if position absolute is used.
Thanks.
Check this jsfiddle. As onetrickpony mentioned, need to be positioning the elements.
div
{
width:100%;
height:100px;
}
img
{
width:100%;
}
#div1 {
z-index: 10;
position: relative;
}
#div2
{
position: relative;
margin-top:-100px;
border: 1px solid #f00;
z-index: 20;
color: #fff;
font-weight: bold;
}
Related
How do I make a fixed element push other elements to the side when they overlap?
I don't want this:
Or this:
I want this:
I want to know how to make the elements collide or push so that I can easily align the elements without having to position them pixel by pixel.
Edit: I tried positioning a div to be fixed and displaying it as a block, but other elements were still overlapping it. Is it even possible to push elements away from a fixed element?
Is it even possible to push elements away from a fixed element?
I would say no. Not with this concept.
I can think of two solutions that I would not recommend.
Implement it with an iframe. But I would not recommend that.
Using JS to read out the width and assign it to the neighbouring element.
I updated my question after i got a good hint. For this example i added body height 200vh; that you can scroll down to see like it works.
body {
height: 200vh;
}
.verti {
background: red;
width: 200px;
height: 500px;
z-index: 10;
position: fixed;
top: 8px;
}
.hori {
background: green;
width: 500px;
height: 200px;
z-index: 1;
position: relative;
left: 200px;
}
<div class="w">
<div class="hori"></div>
<div class="verti"></div>
</div>
Tried using float? I'm pretty new to all this but this is what I got:
<body>
<div id="container">
<div id="fixed">
<p class="center-text white">Fixed <br>Element</p>
</div>
<div id="not-fixed">
<p class="center-text white">Not Fixed Element</p>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
font-family:arial;
}
.center-text {
text-align:center;
position:relative;
top:45%;
}
.white {
color:white;
}
#container {
margin:10px;
width:700px;
height:700px;
}
#fixed {
background-color:red;
position:fixed;
width:200px;
height:500px;
}
#not-fixed {
position:relative;
background-color:green;
width:500px;
height:200px;
float:right;
}
</style>
</body>
I have three div's and try to draw a border on every div.
But it only shows a border at the top of the div`s, as you can see here.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.mydiv
{
position: relative;
border:1px solid yellow;
}
.mydiv_content
{
position: absolute;
border:1px solid red;
}
.mydiv_buttons
{
position: absolute;
border:1px solid green; /* D8D8D8 */
}
</style>
</head>
<body>
<div class="mydiv">
<div class="mydiv_content">
<p> TEST 1</p>
</div>
<div class="mydiv_buttons">
<br>
<input type="submit" value="send"></input>
</div>
</div>
</body>
</html>
I don't know why it only shows the border at the top, it would be great if someone can explain this to me. You can find the full code on jsfiddle.
That's because you are setting height with % relative to the parent div which is position:absolute and has no height defined because your are using on it height:800%; that has no affect because of the position property.
Just define the height of the parent in px:
.mydiv
{
position: relative;
border:1px solid yellow; /* D8D8D8 */
width:70%;
height:800px; // define the height
margin-top: 100px;
margin-left: 200px;
}
Your .mydiv element is not getting proper Height
.mydiv {
position: relative;
border: 1px solid yellow;
width: 70%;
height: 80px; //added
margin-top: 100px;
margin-left: 200px;
}
Working Demo
Try change all your class position:absolute; into position:relative;. Or remove the position:absolute in child div.
Try get rid child div height. So won't be huge space in parent div.
Example look at my demo.
My Demo
I've been trying to get the the left and write columns to stick to the bottom of the green box like this http://i.imgur.com/zxChJx5.png but after an hour I'm still having trouble, if anyone could help that would be most appreciated, thank you very much http://jsfiddle.net/jybu6j47/
<!DOCTYPE html>
<html>
<head>
<style>
.well {
height: 300px;
width: 50%;
background-color:green;
}
.something {
background-color: yellow;
}
.left123 {
width: 50%;
float: left;
background-color: pink;
}
.right123 {
width: 50%;
float: right;
text-align:right;
background-color:red;
</style>
</head>
<body>
<div class="well">
Filler
<div class="something">
<div class="left123">Left</div>
<div class="right123">Right</div>
</div>
</div>
</body>
</html>
You need to position:relative; the container, and position:absolute; the contents, then set bottom: 0 on the contents like this:
http://jsfiddle.net/jybu6j47/1/
So it should look like this:
.well {
height: 200px;
width: 50%;
background-color:green;
position:relative;
}
.something {
position:absolute;
bottom:0;
width:100%;
background-color: yellow;
}
Position absolute tells an element exactly where to be, relative to it's closest position:relative (or absolute – or a couple of other properties come to think of it) container. In this case, giving it bottom:0 is effectively saying "Put me zero pixels from the bottom of the container".
How come the higher z-index of a parent for a child gets overridden by another parent?
The child topInner inside top gets overridden by bottom z-index. Is not z-index inherited?
I'll provide a code snippet here.
<style>
.top {
width:300px;
height:20px;
background-color:blue;
z-index:30;
}
.topInner {
width: 300px;
height: 20px;
background-color: green;
z-index: 30;
text-align:center;
}
.bottom {
width: 300px;
height: 60px;
background-color: red;
z-index: 20;
}
<div class="main">
<div class="top">TOP
<div class="topInner">Inner</div>
</div>
<div class="bottom">Bottom</div>
The divs should have position other than static for z-index to work.
working JSFiddle
I am trying to make an overlapping a DIV onto other visually . I am trying
{
position:absolute;
top:-10px;
}
in css, but I found that this top attribute is not working properly in firefox. Dear fellas, how to do that? Please help me with some codes or examples.
thx in advance
Here's an easy way
CSS
.top {
position: relative;
}
.topabs {
position: absolute;
}
HTML
<div class='top'>
<div class='topabs'>
I'm the top div
</div>
</div>
<div>No styles, just frowns :(</div>
The relative positioned div collapses as there are no contents, causing the coordinates 0,0 coordinates of the absolute positioned div to be that of the div underneath.
Fiddle
http://jsfiddle.net/y5SzW/
Try this, I like to use relative position for this kind of thing.
<html>
<head>
<style type="text/css">
body{
background-color: #000;
padding:0;
margin:0;
}
#bottom {
width: 200px;
height: 200px;
border: 5px #fff solid;
background-color:#f00;
margin: 0 auto;
}
.top {
width: 200px;
height:200px;
top: 10px;
left: -100px;
z-index: 10;
background-color: #00f;
color: #333;
border: 5px solid #fff;
position: relative;
}
</style>
</head>
<body>
<div id="bottom">
<div class="top"></div>
</div>
</body>
</head>
I would of course seperate the CSS into it's own file later.
Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.