I currently have something like this
<div class="mycol" id="mycanvas" style="z-index: -1; top:150px;left:240px;width:88%; height:80%; position: absolute;background-color:red;">
</div>
<div class="testclass">
Hello World
</div>
I would like the content of testclass to appear below mycol class. I know i could do that by making it absolute is there any where other than that by which i can tell it to vertically start of when the mycol class ends
You could put testclass inside mycol, and add position: relative; top: 100%; to testclass like this:
<div class="mycol" id="mycanvas" style="z-index: -1; top: 150px; left: 240px; width: 88%; height: 80%; position: absolute; background-color: red;">
<div class="testclass" style="position: relative; top: 100%;">
Hello World
</div>
</div>
I think the requirement of keeping the div.testclass under div.mycol doesn't need the use of position.
If you can explain the complete requirement which you are trying to achive can help all to give you a better solution.
<div style="height:200px;padding:50px;">
<div class="mycol" id="mycanvas" style="width:88%; height:80%;background-color:red;">
</div>
<div class="testclass" style="margin-top:20px;">
Hello World
</div>
</div>
Well, by making mycol have position:aboslute you are removing it from the page's normal flow. We can demonstrate this like so.
<div class="mycol" style="position: absolute; height: 80%; width: 88%; background-color: rgba(255, 0, 0, .4); top: 150px; left: 240px;">
</div>
<div class="testclass" style="margin-left: 500px; height: 500px; width: 500px; background-color: black;"></div>
As you can see, the testclass is completely unaffected by mycol's position.
So, in your sample, although we can see the red box, it is not affecting the position of "Hello World".
If we would like to move the text below it, then we could use margins, disrupt the normal flow (using position), or put content behind the existing text to eventually force it below it.
Since you specified that you do not want to use the position technique, then I will demonstrate this using margins. We can use percents, such as : margin-top: 80%, but this would have some odd effects. W3 specifics that margin-top goes off of the width of it's container when using percents, so you wouldn't benefit a whole lot.
Regardless, it does answer your question!
<div class="mycol" style="position: absolute; height: 80%; width: 88%; background-color: rgba(255, 0, 0, .4); top: 150px; left: 240px;">
</div>
<div class="testclass" style="margin-top:100%; background-color: gray;">
Hello world
</div>
Related
I have in my page the following section:
Screenshot of the bottom of my page
Basically i have a fixed div with some buttons that we show on the bottom of the page. The thing is, sometimes we include only one button, sometimes we include four or five. When you resize the page, the buttons get pushed down, this is the normal behaviour I guess:
What happens when I resize
I was wondering, is it possible to reverse the direction the buttons are being pushed towards? As in, force the div to take more space above itself, and not downwards, therefore keeping the buttons visible?
Our fixed element has the following CSS, in case it is useful
.actions_fixbar {
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
z-index: 9;
background: #fff;
height: 50px;
box-shadow: 0px 0px 5px 0px #ddd;
}
Remove height attribute.
let a = 1;
function addButton() {
$('#footer').append('<button>Button '+ ++a+'</button>');
}
#footer {
position: fixed;
width: 100%;
bottom: 0;
background: #c4c4c4;
}
button {
width: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="addButton()">Add more button</button>
<div id="footer">
<button>Button 1</button>
</div>
Try this with bootstrap.The buttons are just placeholders for a quick demo.Replace them with your actual elements
<style>
footer{
position: fixed;
bottom: 0;
width: 100vw;
}
</style>
<footer>
<div class="container">
<div class="row ">
<div class="col">
<button>Back</button>
</div>
<div class="col">
<button>Submit</button>
</div>
<div class="col">
<button>Request to update</button>
</div>
<div class="col">
<button>Export by default</button>
</div>
</div>
</div>
</footer>
Here is the repository for my personal website: https://github.com/flakpanzer40/flakpanzer40.github.io
As you may notice, the particles I've used are simply showing below my name, image, and description. I've tried numerous times to overlap them so that the particles happen in the back, but to no avail. I've tried absolute positions, z-index, re-arranging the DIVs, etc. I'm terrible at CSS.
Can anyone help?
Please add following styles:
.container {
/*other css*/
position: relative;
z-index: 1;
}
.particles-js-canvas-el {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
Use the following Code:
HTML:
<div id="particles-js" style="">
<canvas class="particles-js-canvas-el" width="1903" height="952" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"></canvas>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/EvanRen.jpg" alt="Evan Ren" style="width:500px;height:600px;border:5px solid white;border-radius: 50%;">
<div class="intro-text">
<span class="name">University of Waterloo Computer Science</span>
<hr class="star-light">
<span class="skills">Problem_solving expert - Hardworking - Passionate</span>
</div>
</div>
</div>
</div>
</div>
CSS:
#particles-js {
width: 100%;
height: 100%;
background-color: #13717c;
position: relative;
top: 0;
}
It is important that the parent (#particles-js) has position: relative so that you can use absolute positioning for the children.
I have seen this question have been asked many times, but mine is a little complicated.
I am using bootstrap on my website, and basically, I am trying to join two images one half is a customer image, other half is a business image. What actually I'd like is, when one hover overs the first half i.e the customer image, the second half i.e the business image should turn to the second half of the customer image and the vice versa when someone hovers over the business image.
Here's my HTML code.
<div class="pics">
<div class="1half">
<div class="col-sm-2" style="padding-right: 0;" id="b1">
<img src="image/b1.png" alt="" width="340px" style="float: right;">
</div>
<div class="col-sm-2" style="padding-right: 0; display: none;" id="c1">
<img src="image/c1.png" alt="" width="340px" style="float: right;">
</div>
</div>
<div class="2half">
<div class="col-sm-2" class="flash" style="padding-left: 0;" id="c2">
<img src="image/c2.png" alt="" width="338px">
</div>
<div class="col-sm-2" class="flash" style="padding-left: 0; display: none;" id="b2">
<img src="image/b2.png" alt="" width="338px">
</div>
</div>
In the above code, what I want is when someone hovers over #b1: #c2 should go away, and #b2 should be visible. I tried implementing CSS changes but it doesn't work.
I have added the link on JSfiddle here. http://jsfiddle.net/2R5bq/
Basically on hover, both should be the same.
No need for so many div's. One main wrapper, two image wrappers/masks is all you need. See this JSFiddle a threw together.
HTML
<div id="imageWrapper">
<div id="imageLeftImageWrapper">
<image src="http://lorempixel.com/320/180/animals/" />
</div>
<div id="imageRightImageWrapper">
<image src="http://lorempixel.com/320/180/cats/" />
</div>
</div>
CSS
#imageWrapper {
position: relative;
width: 320px;
height: 180px;
}
#imageWrapper #imageLeftImageWrapper {
position: absolute;
top: 0px;
left: 5px;
width: 160px;
height: 180px;
overflow: hidden;
}
#imageWrapper #imageRightImageWrapper {
position: absolute;
top: 0px;
right: 0px;
width: 160px;
height: 180px;
overflow: hidden;
}
#imageWrapper #imageRightImageWrapper img {
position: absolute;
right: 0px;
}
#imageWrapper #imageLeftImageWrapper:hover,
#imageWrapper #imageRightImageWrapper:hover {
width: 320px;
z-index: 1;
}
I'm trying to place an img over another img, because I want the effect of a scrapbook with the images being "taped" into the homepage.
I'd like to keep the tape layer consistent and free myself to change the image underneath without losing the positions.
HTML:
<div id="container">
<div id="content">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />
<div class="text">
<h2>Rain Hands</h2>
<p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p>
</div>
</div>
</div>
CSS:
.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }
.tape {
margin-left: 10px;
margin-top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}
What I get is:
http://oi50.tinypic.com/28s8x8j.jpg
But I want the tape to be on top of the corners of the image.
Take the tape outside of the div container:
<img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />
<div id="container">
<div id="content">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<div class="text">
<h2>Rain Hands</h2>
<p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p>
</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/hescano/bb5JC/
Try #content {position: relative;}, and remove the float on the .tape.
The way that I would accomplish this is by making a wrapper div (class="image") to place the photo and the tape graphic inside of. Then wrap the tape image in another absolutley positioned div. Now you can use the top: left: to position the tape graphic so it matches up. In your example, the tape is too tall for your sample image. If you are going to have varying image sizes, it might be smart to make two tape images, one for the top and one for the bottom, and position them using top: and right: and bottom: and left:
<style>
.image{
position:relative;
}
.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }
.tape {
left: 10px;
top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}
</style>
<div class="image">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<div class="tape"><img src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" /></div>
</div>
I have a small example, with two adjacent divs with a background image. This divs are tiles in a tile based editor. I want to place an image into the first div and change the position of the image, so that the image overlaps both divs (see http://jsfiddle.net/WRZJe/16/). I've set the z-index of all divs and I've set the z-index of the image. The position attribute for both, divs and image is set to absolute:
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<div style="top: -720px; left: -1040px;
background-position: -82px -162px;" class="show-tile">
<img id="token-1" class="token-img"
src="1.png" alt="token1" style="top: 0px; left: 40px">
</div>
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
</div>
</div>
</body>
Here is the relevant css-code:
.dungeon-container {
position: absolute;
}
.show-tile {
background-image: url("stone_dungeon.png");
height: 80px;
width: 80px;
position: absolute;
z-index: 5;
}
.token-img {
position: absolute;
z-index: 50;
}
As the z-index of the images is higher then both divs, I expect the image to be drawn in front of both divs. But page behaves like no z-indexes where given. The image hides behind the second div and would be in front of every div before the image containing div.
What might cause the browser (I've tested Safari and FF) to ignore the given z-index?
Update: I've added a screenshot from the actual application (http://robitzki.de/zindex.png) that shows, that the image moves behind those divs, that are placed after the containing div.
Each div.show-tile (which are all siblings) creates an own stacking context! Child elements remain in the stacking context of the parent, thus your img will be hidden if it is adjacent to a div which has a higher z-index as the images parent div. The z-index of the image itself (=child) does not matter in this case.
In order to have the image overlap all the divs, the cleanest solution would be to not put it into one of the divs, but put it separately as a sibling to your .show-tile divs and give it the highest z-index.
Alternatively, you could omit your absolute positioning on the divs - this would make the img having it's position depend on #dungeon_canvas.
If you cannot do so, you have to assure that the div which holds your image always has the highest z-index.
You have to put the second div before the first one so that it comes before the img tag
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
<div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile">
<img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: 0px; left: 40px">
</div>
</div>
</div>
</body>
http://jsfiddle.net/WRZJe/17
If you can move the img tags out of the divs and position them using similar coordinates to the divs then the following will produce the desired display
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -1000px" />
<img id="token-2" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -930px" />
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
<div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile">
</div>
</div>
</div>
</body>
http://jsfiddle.net/WRZJe/20
Because the second .show-tile has a higher z-index than the image, the image will be cut off
try this:
.dungeon-container {
position: absolute;
}
.show-tile {
background-image: url("stone_dungeon.png");
height: 80px;
width: 80px;
position: absolute;
/*z-index: 5;*/
}
.token-img {
position: absolute;
z-index: 1;
}
Check fiddle to see it work
Now do easily this as like this Live Demo
Html code
<div class="main-container">
<div class="pic-1 pic-5"></div>
<div class="pic-1 pic-3"></div>
<div class="pic-1 pic-2"></div>
<div class="pic-1 pic-4"></div>
<img src="http://dungeonpilot.com/assets/tokens/1.png" alt="" class="pic-change">
</div>
Css
.pic-1 {
background-image: url("http://dungeonpilot.com/assets/stone_dungeon.png");
height: 80px;
width: 80px;
float:left;
position:relative;
background-position: -3px -3px;
}
.pic-2{
clear:left;
}
.pic-change{
position:absolute;
left:40px;
top:40px;
z-index:3;
}
.main-container{
position:relative;
}
.pic-4{
z-index:4;
}
Demo