I want 3 images on top of each other (so i can switch between them with the slider). I use the relative/absolute technique.
Strangely, the result is floating outside the div (see the picture below).
When I try to fix it with clearfix, it just cancel the superposition.
Any help ?
Here is a part of my css :
body {
img {
width: 900px;
}
#parentsuperpose {
position: relative;
}
img.superpose {
position: absolute;
top: 25px;
left: 25px;
}
#img1 {
z-index: 10;
}
#img2 {
z-index: 11;
}
#img3 {
z-index: 12;
}
Here is part of my HTML
<div class="row">
<div class="col-md-12" id="parentsuperpose">
<img src="images/mur01.jpg" class="superpose" id="img1" alt="mur01" style="visibility:visible;">
<img src="images/mur02.jpg" class="superpose" id="img2" alt="mur02" style="visibility:hidden;">
<img src="images/mur03.jpg" class="superpose" id="img3" alt="mur03" style="visibility:hidden;">
</div>
</div>
Here is the result :
enter image description here
Related
I have three images. I want to combine them
I am referring to this link
https://www.w3schools.com/css/css_positioning.asp#:~:text=An%20element%20with%20position%3A%20absolute,moves%20along%20with%20page%20scrolling.
I am trying to achieve this three combine images
I tried static and relative position but they did not work
.object-left, .main-image {
position: absolute;
}
.object-right , .main-image{
position: absolute; //here I am using comma but not work
}
.cshtml
.object-left,
.main-image .object-right {
position: absolute;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="~/Graphics/Services Page/obj1.svg" style="width:50px;height:50px;" /> //1 image
<img class="main-image" src="~/Graphics/Services Page/Mobile app developement.svg" /> //2 image
<img class="object-right" src="~/Graphics/Services Page/obj2.svg" style="width:50px;height:50px;" /> //3 image
</div>
<div class="col-md-6" style="margin-top:100px;">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
The problem is that when you use absolute positioning, the objects start at the upper-left corner of the parent (i.e. location 0x0), so all your three images appear on top of each other. All you need to do is tell them where they should be by adding the left property. The first image can stay at left=0, so you don't need to do anything. The second image must start at the width of the first image, left=50px in my example below. The third image must start at the total width of the fist and second image, left=100px in my example below.
Also remember that since you used absolute positioning on all three images and the parent doesn't have any other content, it will collapse. So you need to give it the height of the tallest image.
.object-left {
position: absolute;
}
.main-image {
position: absolute;
left: 50px;
}
.object-right {
position: absolute;
left: 100px;
}
.image {
height: 100px;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="http://placehold.it/50x50" />
<img class="main-image" src="http://placehold.it/50x100" />
<img class="object-right" src="http://placehold.it/50x50" />
</div>
<div class="col-md-6">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
Note: in the example above, all images are placed at the top of the parent by default. If you want some images to start at a different location, then give it a top property. In the example below, I gave the third image a top=50px property to align it with the bottom of the second image:
.object-left {
position: absolute;
top: 0;
}
.main-image {
position: absolute;
left: 50px;
top: 0;
}
.object-right {
position: absolute;
left: 100px;
top: 50px;
}
.image {
height: 100px;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="http://placehold.it/50x50" />
<img class="main-image" src="http://placehold.it/50x100" />
<img class="object-right" src="http://placehold.it/50x50" />
</div>
<div class="col-md-6">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
I think this is what you want to do. I would remove the inline style on the object- images and put that in the css. I left the top, left, right on .object- empty so that you can put where you want to place them.
Does this make sense?
.image {
position: relative;
}
.object-left {
position: absolute;
top: ;
left: ;
}
.main-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.object-right {
position: absolute;
top: ;
right: ;
}
<div class="image">
<div class="object-left"></div>
<div class="main-image"></div>
<div class="object-right"></div>
</div>
I have two buttons that need to be moved on top of image. One button should be on right side of an image, and another one on the left side. However at the moment they stick at the bottom left corner of the image, while they should be on separate sides in the middle of photo. What I am doing wrong?
HTML part:
<div class="container">
<img class="mySlides" src="images/dog1.jpg" style="width:100%">
<img class="mySlides" src="images/dog2.jpg" style="width:100%">
<img class="mySlides" src="images/dog3.jpg" style="width:100%">
<img class="mySlides" src="images/dog4.jpg" style="width:100%">
<button class="carousell-button carousell-button-black carousell-button-left" onclick="plusDivs(-1)">❮</button>
<button class="carousell-button carousell-button-black carousell-button-right" onclick="plusDivs(1)">❯</button>
</div>
CSS part:
.container carousell-button-right {
position: relative;
top: 200%px;
right: 0%;
}
.container carousell-button-left {
position: absolute;
top: 100%;
left: 0%;
}
How it looks right now:
enter image description here
since you need it in the middle then use Relative to parent and use absolute for Right as well. This will make sure it is positioned absolutely middle based on the image size.
You should also use . for the carousell class.
As mentioned in the comments above 200%px; is an invalid property value.
body {
margin: 0;
}
.container {
position: relative;
}
.container .carousell-button-right {
position: absolute;
top: 50%;
right: 0;
font-size: 30px;
}
.container .carousell-button-left {
position: absolute;
top: 50%;
left: 0;
font-size: 30px;
}
<div class="container">
<img class="mySlides" src="http://placekitten.com/301/301" style="width:100%">
<button class="carousell-button carousell-button-black carousell-button-left" onclick="plusDivs(-1)">❮</button>
<button class="carousell-button carousell-button-black carousell-button-right" onclick="plusDivs(1)">❯</button>
</div>
Look at the snippet below and try to use flex-box
div {
width: 200px;
height: 200px;
background-color: black;
display: flex;
justify-content: center;
align-items: flex-start;
}
button {
width: 50px;
height: 20px;
}
<div>
<button>btn</button>
<button>btn</button>
</div>
Below is my code, my goal is to prevent the div with an id "description" to overlap on the div with class name "container_display". How can I achieve this? I want the second div to show at the bottom of the image.
#container_display {
position: relative;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
}
<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div>
<div id="description">TEXT HERE</div>
You need to set a height for the container, because the absolutely positioned elements are not considered to occupy width or height in the container.
Details on MDN:
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout
#container_display {
position: relative;
height: 60px;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
height: 60px;
}
<div id="container_display">
<img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
<img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>
<div id="description">TEXT HERE</div>
There is one way to "hack it", which is to place one static image there and make it visibility: hidden, which is to occupy space, but not visible, and the position back to static:
#container_display {
position: relative;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
height: 60px;
}
#container_display .spacer {
visibility: hidden;
position: static;
}
<div id="container_display">
<img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
<img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
<img class="spacer" src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>
<div id="description">TEXT HERE</div>
You don't need this:
#container_display img {
position: absolute;
top: 0;
left: 0;
}
You could also add a break between both divs to create space between them, like this:
<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div>
<br>
<div id="description">TEXT HERE</div>
I need to display 4 images centered in the screen. I need this images must be stacked one of top another. I resolved the stack part:
.img-container { position: relative; }
.img-container .top {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<div class="img-container">
<img src="icon-1.png">
<img class="top" src="icon-2.png">
<img class="top" src="icon-3.png">
<img class="top" src="icon-4.png">
</div>
<div >
<img class="img-responsive center-block " src="another-image-below.png"
style="display: block; margin: 0 auto;">
</div>
That gives me the 4 images stacked BUT now I need to center all 4 of them (horizontally). The "another-image-below.png" is just another image that it is also centered but that must be placed below the 4 stacked images.
It sound simple, and I tried everything but I cannot resolve it.
How can I achieve that?
Thanks in advance.
EDIT:
https://jsfiddle.net/b5p8dkcu/4/
You don't need the z-index in your example, unless you have another element somewhere that has to be behind the images.
You can just add align="center" to the <div align="center" class="img-container">.
EDIT:
<html>
<style>
.img-container {
position: relative;
top: 0;
left: 0;
}
.top {
}
<div align="center" class="img-container">
<img src="icon-1.png">
<img class="top" src="icon-2.png">
<img class="top" src="icon-3.png">
<img class="top" src="icon-4.png">
</div>
<div >
<img class="img-responsive center-block " src="6.png"
style="display: block; margin: 0 auto;">
</div>
If you need them to be vertically on top of each other:
<style>
.img-container {
position: relative;
top: 0;
left: 0;
}
.top {
display: block;
}
If you need them to be literally on top of each other:
<style>
.img-container {
position: relative;
top: 0;
left: 0;
}
.top {
position: absolute;
}
Hi i have an <hr> line stretching across the page, but I think it keeps getting cut off by an image above it. Does anyone know how I could make it so that the <hr> line overlaps the image?
<img src=".\pncwelcome.png"
style="float:right; clear:right; margin-top:-40px;"
alt="PNC Welcome Logo"/>
<hr color="black"
style="margin-top:30px;" />
Use position: absolute;.
Check the fiddle.
Something like this should work.
The CSS:
.parent {
position: relative;
}
img {
width: 200px;
}
hr {
position: absolute;
z-index: 50;
top: 30px;
right: 0;
left: 0;
}
HTML:
<div class="parent">
<hr>
<img src="http://fanumusic.com/wp-content/uploads/2012/10/Free.jpg">
</div>
Use Z-index. In the css if you set the hr to a higher z-index value it will be layered over the image. Or since you're floating the image, float the hr too and then set a higher z-index
on it so that it will still overlap the image.
If you float the <hr> you will have to set a width on the parent element.
Use:
<img src=".\pncwelcome.png" style="z-index: 1; float:right; clear:right; margin-top:-40px;" alt="PNC Welcome Logo"/>
<hr color="black" style="z-index: 2; margin-top:30px;" />
If that doesnt' solve it use this instead:
<img src="http://placekitten.com/g/200/300" style="float:right; clear:right; margin-top:-40px; z-index:1;" alt="PNC Welcome Logo"/>
<hr color="black" style="float: left; z-index: 2; margin-top:-30px; width: 100%;" />
Building off of Savas's answer, as I experienced some rendering issues when the <img> was not also given absolute positioning...
Here is how one would create an <hr> with a graphical embellishment. The <div> is sized to the graphic being used and everything is treated like a single, spatially-defined unit on the page:
#example {
display: block;
position: relative;
width: 100%;
height: 92px;
}
#example hr {
position: absolute;
z-index: 0;
top: 46px;
bottom: 46px;
margin: 0px;
width: 100%;
border: 5px solid #8fcbf1;
}
#example img {
position: absolute;
width: 272px;
height: 92px;
z-index: 5;
left: calc(50% - 136px);
}
<div id="example">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" />
<hr />
</div>
Here is the Fiddle: https://jsfiddle.net/z517fkjx/
Also, this uses calc() for centering, which is CSS3-only.