Sorry for the messy code:
<div style="position: relative;">
<div style="position: absolute; top: 50%;">This should be vertically centered</div>
<img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg" width="100%" style="visibility: hidden; position: absolute;"; />
<img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg" width="100%" />
</div>
http://jsfiddle.net/a5as2/
as you can see, the text is almost centered vertically - but as you will shrink the width, you will see thats not 100% precise. What to fix now<
A pure css solution would be to set the inside div a height, and add margin: -height/2 px for it.
Example:
<div style="position: absolute; top: 50%; height: 20px; margin-top: -10px;">This should be vertically centered</div>
In case you don't know the height of the div, you can use js to get it, then reposition the div.
Will be something like (jQuery, directly in answer so might have some problems, adapt it pls.):
$("#idDiv").css("margin-top") = parseInt($("#idDiv").height() / 2) + "px";
Another solution, would be to use table-cell display, and vertical-align: middle (I personally don't like it, but may fit your needs).
What about this?
http://jsfiddle.net/a5as2/3/
.use-a-stylesheet-and-classes-please { top: 50%; position: absolute; }
It is in the middle, even if you shrink it.
You can position the elements when shrinked by using media queries. And... please, don't use inline styling.
Related
How do I get these pictures side by side with css I cant get it to work.
I tried everything but nothing is working for me and I cant find a tutorial for what I need on the web pls help me. and it has to be responsive.
HTML:
<div class="seizoenen">
<div class="container">
<img src="image/zomer.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/herfst.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/winter.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/lente.jpg" height="100%" width="25%" />
</div>
</div>
Here is a JSFiddle.
https://jsfiddle.net/bs3fz70v/2/
if you want it to be responsive...
Change img tags to max-width and set this in CSS. This will scale image down once it hits smaller screens.
Focus on your parent and child element structure. Your .container width should be set to 25%, not your img tag.
You mentioned text overlay in your comment. Set .container (parent element) to position: relative; Set any tag (child element) within that .container to position: absolute;. Now you can set top or left any value within 100% and contain it within that .container. And since the img tag is max-width:100%;, it will take on full width of that container, which is 25%.
Also set height to auto so images aren't stretched.
CSS
.seizoenen{
width:100%;
}
p {
position: absolute;
top: 50%;
left: 50%;
}
.container{
display: inline-block;
width: 24%;
position: relative;
}
img{
max-width: 100%;
}
Hope this gets you started experimenting with more positioning
Hoi bart, its quite easy to do. Your container needs to be display: inline-block; this will place the images next to eachother. And to fill the space of the images make them width: 100%;
Right fiddle now
One thing wasn't really clear to me you want the images to scale to a smaller size aswell?
Here is a simplification of my layout:
<div style="position: relative; width:600px;">
<p>Content of unknown length, but quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite long</p>
<div>Content of unknown height</div>
<div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;background-color: red;"></div>
</div>
The problem I'm having is that if the text/unknown div content is too long it is overlapping my absolutely positioned div.
I have searched the web and SO for a solution and the only one I found suggested putting an invisible div where absolutely positioned div is - trouble is if I could do that I wouldn't need to have the absolutely positioned div in the first place (or am I missing the point here).
Can anyone think of a css solution before I go down the jquery route?
The solution for me was to create a second invisible div at the end of the content of unknown length, this invisible div is the same size as my absolutely positioned div, this ensures that there is always a space at the end of my content for the absolutely positioned div.
This answer was previously provided here:
Prevent absolutely-positioned elements from overlapping with text
However I didn't see (until now) how to apply it to a bottom right positioned div.
New structure is as follows:
<div id="outer" style="position: relative; width:450px; background-color:yellow;">
<p>Content of unknown length</p>
<div>Content of unknown height </div>
<div id="spacer" style="width: 200px; height: 25px; margin-right:0px;"></div>
<div style="position: absolute; right: 0; bottom: 0px; width: 200px; height: 20px; background-color:red;">bottom right</div>
</div>
This seems to solve the issue.
Short answer: There's no way to do it using CSS only.
Long(er) answer: Why? Because when you do position: absolute;, that takes your element out of the document's regular flow, so there's no way for the text to have any positional-relationship with it, unfortunately.
One of the possible alternatives is to float: right; your div, but if that doesn't achieve what you want, you'll have to use JavaScript/jQuery, or just come up with a better layout.
If you are working with elements of unknown size, and you want to use position: absolute on them or their siblings, you're inevitably going to have to deal with overlap. By setting absolute position you're removing the element from the document flow, but the behaviour you want is that your element should be be pushed around by its siblings so as not to overlap...ie it should flow! You're seeking two totally contradictory things.
You should rethink your layout.
Perhaps what you want is that the .btn element should be absolutely positioned with respect to one of its preceding siblings, rather than against their common parent? In that case, you should set position: relative on the element you'd like to position the button against, and then make the button a child of that element. Now you can use absolute positioning and control overlap.
Put a z-indez of -1 on your absolute (or relative) positioned element.
This will pull it out of the stacking context. (I think.) Read more wonderful things about "stacking contexts" here: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Thing which works for me is to use padding-bottom on the sibling just before the absolutely-positioned child. Like in your case, it will be like this:
<div style="position: relative; width:600px;">
<p>Content of unknown length, but quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite long</p>
<div style="padding-bottom: 100px;">Content of unknown height</div>
<div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;background-color: red;"></div>
</div>
<div style="position: relative; width:600px;">
<p>Content of unknown length</p>
<div>Content of unknown height</div>
<div id="spacer" style="width: 200px; height: 100px; float:left; display:inline-block"></div>
<div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div>
</div>
This should be a comment but I don't have enough reputation yet. The solution works, but visual studio code told me the following putting it into a css sheet:
inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'
So I did it like this
.spacer {
float: left;
height: 20px;
width: 200px;
}
And it works just as well.
Could you add z-index style to the two sections so that the one you want appears on top?
You should set z-index to absolutely positioned div that is greater than to relative div.
Something like that
<div style="position: relative; width:600px; z-index: 10;">
<p>Content of unknown length</p>
<div>Content of unknown height</div>
<div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; z-index: 20;"></div>
</div>
z-index sets layers positioning in depth of page.
Or you may use floating to show all text of unkown length. But in this case you could not absolutely position your div
<div style="position: relative; width:600px;">
<div class="btn" style="float: right; width: 200px; height: 100px;"></div>
<p>Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length</p>
<div>Content of unknown height</div>
<div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div>
</div>
I'm responding because I also ended up in this post and found a simple and effective solution: the absolute element has a fixed position and size, so you simply need to add right padding of 400px (referring to your example) to your content
put texts into a new div. Then make that div also position: absolute; . Also, you can use overflow: hidden; for that div.
I'm not sure what I would search for, but I believe it's just as simple as changing the type of position: to be used in CSS.
I have a Container DIV (width: 960px), and I want an orange "bar" in it somewhere, but it will be wider than its container, it will be 100%. How can I achieve this?
You can use absolute positioning to achieve this effect.
HTML:
<div id="wrapper">
<div id="orange-bar"></div>
</div>
CSS:
#orange-bar {
position: absolute;
left: 0;
right: 0;
}
JS Fiddle: http://jsfiddle.net/Xh8uL/2/
I have this piece of HTML code:
<div>
<div>
<image src="image-inside-pic-png.png" alt="">
</div>
<image src="pic.png" alt="" />
</div>
The pic.png (300x300 px) is the main image. I would like to put the image-inside-pic-png.png (20x20 px) inside of it. When I apply position: absolute; on the small image, it works only momentarily.
If I change the size of either, it no longer works.
So my question is, how can I move the small image always in the big image - and this small image will be always 15px from the top and 30px from the right margin of the big image?
Thank you for help
I think this should work:
HTML:
<div>
<img src="image-inside-pic-png.png" alt="" class="inner-image"/>
<img src="pic.png" alt="" />
</div>
CSS:
div {
position: relative;
}
.inner-image {
position: absolute;
top: 15px;
right: 30px;
}
Anyway, make sure you need to do this with HTML. Maybe it's better to simply edit the image with Photoshop or Gimp. Or maybe one image it's only for styling purpose, then you should use CSS.
Without changing your markup this can be achieved e.g. using display:inline-block to the outermost div element (so it won't extend for 100% of the available width) and position relative + absolute for outermost div and thumbnail
see this fiddle: http://jsfiddle.net/cRqhT/3/
border and image size are defined for simplicity
put both images in one div which uses position:relatvie, then apply position:absolute to images, and adjust the value as you need.
**html**
<div class="images">
<img src="./images/Rectangle.png" alt="bg"/>
<img src="./images/lady.png" alt="lady" class="lady-image"/>
</div>
**css**
.images {
position: relative;
}
.lady-image {
position: absolute;
top: 0;
right: 0;
}
I'm a beginner at rails programming, attempting to show many images on a page. Some images are to lay on top of others. To make it simple, say I want a blue square, with a red square in the upper right corner of the blue square (but not tight in the corner). I am trying to avoid compositing (with ImageMagick and similar) due to performance issues.
I just want to position overlapping images relative to one another.
As a more difficult example, imagine an odometer placed inside a larger image. For six digits, I would need to composite a million different images, or do it all on the fly, where all that is needed is to place the six images on top of the other one.
Ok, after some time, here's what I landed on:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
border: 1px red solid;
}
.image2 {
position: absolute;
top: 30px;
left: 30px;
border: 1px green solid;
}
<div class="parent">
<img class="image1" src="https://via.placeholder.com/50" />
<img class="image2" src="https://via.placeholder.com/100" />
</div>
As the simplest solution. That is:
Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.
This is a barebones look at what I've done to float one image over another.
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}
<img class="imgA1" src="https://via.placeholder.com/200/333333">
<img class="imgB1" src="https://via.placeholder.com/100">
Source
Here's code that may give you ideas:
<style>
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>
JSFiddle
I suspect that Espo's solution may be inconvenient because it requires you to position both images absolutely. You may want the first one to position itself in the flow.
Usually, there is a natural way to do that is CSS. You put position: relative on the container element, and then absolutely position children inside it. Unfortunately, you cannot put one image inside another. That's why I needed container div. Notice that I made it a float to make it autofit to its contents. Making it display: inline-block should theoretically work as well, but browser support is poor there.
EDIT: I deleted size attributes from the images to illustrate my point better. If you want the container image to have its default sizes and you don't know the size beforehand, you cannot use the background trick. If you do, it is a better way to go.
One issue I noticed that could cause errors is that in rrichter's answer, the code below:
<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
should include the px units within the style eg.
<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
Other than that, the answer worked fine. Thanks.
You can absolutely position pseudo elements relative to their parent element.
This gives you two extra layers to play with for every element - so positioning one image on top of another becomes easy - with minimal and semantic markup (no empty divs etc).
markup:
<div class="overlap"></div>
css:
.overlap
{
width: 100px;
height: 100px;
position: relative;
background-color: blue;
}
.overlap:after
{
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 5px;
left: 5px;
background-color: red;
}
Here's a LIVE DEMO
It may be a little late but for this you can do:
HTML
<!-- html -->
<div class="images-wrapper">
<img src="images/1" alt="image 1" />
<img src="images/2" alt="image 2" />
<img src="images/3" alt="image 3" />
<img src="images/4" alt="image 4" />
</div>
SASS
// In _extra.scss
$maxImagesNumber: 5;
.images-wrapper {
img {
position: absolute;
padding: 5px;
border: solid black 1px;
}
#for $i from $maxImagesNumber through 1 {
:nth-child(#{ $i }) {
z-index: #{ $maxImagesNumber - ($i - 1) };
left: #{ ($i - 1) * 30 }px;
}
}
}
Inline style only for clarity here. Use a real CSS stylesheet.
<!-- First, your background image is a DIV with a background
image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
<!-- Second, create a placeholder div to assist in positioning
the other images. This is relative to the background div. -->
<div style="position: relative; left: 0; top: 0;">
<!-- Now you can place your IMG tags, and position them relative
to the container we just made -->
<img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
</div>
</div>
The easy way to do it is to use background-image then just put an <img> in that element.
The other way to do is using css layers. There is a ton a resources available to help you with this, just search for css layers.
You could use CSS-Grid, which is a very convenient solution if you want to stack, overlap content. First you need to define your grid. Inside that grid, you "tell" your img-tags where to be places within that grid. If you define them to be at the same start of the grid, they will be overlapped. In the following example two images are overlapped, one is below them.
<div style="display: grid; grid-template-columns: [first-col] 100%; grid-template-rows: [first-row] 300px">
<img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
<img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
<img src="https://fakeimg.pl/300/">
</div>
You can find a very good explanation of CSS-Grid here.
Set background-size cover. Then wrap your div with another div now set max-width on parent div.
<div style="max-width:100px">
<div style="background-image:url('/image.png'); background-size: cover; height:100px; width:100px; "></div>
</div>
Here is a solution that worked for me. Assuming all the images to be stacked are inside a div container, all you need to do is to set the display property of the div to flex. Don't set any position for the first image but for every other image, set the position property to absolute. Finally, use z-index to control the layers. You can set the first image's z-index to 1, the second image's z-index to 2, and so on (In my own case, I set the z-index of every other image apart from the first image to 2). If you want to center the images, you can set the justify-content property of the div to center to align the images horizontally to the center and adjust the top property to align the images vertically to the center. The values you use for the justify-content and top properties depend on the size of your images and whether the sizes are responsive on different devices or not.
Here's my example:
img {
border: 2px solid red;
}
.img1n2 {
display: flex;
justify-content:center;
}
.img1 {
z-index: 1;
}
.img2 {
position: absolute;
z-index: 2;
top: 52.5%;
}
<div class="img1n2">
<img class="img1" src="https://fakeimg.pl/400/">
<img class="img2" src="https://fakeimg.pl/300/" width="100">
<img class="img2" src="https://fakeimg.pl/200/" width="50">
<img class="img2" src="https://fakeimg.pl/50/" width="30">
</div>
You can actually stack a thousand or a million images with this method. You can play around with the CSS to suit your specific needs. Happy coding!
#buti-oxa: Not to be pedantic, but your code is invalid. The HTML width and height attributes do not allow for units; you're likely thinking of the CSS width: and height: properties. You should also provide a content-type (text/css; see Espo's code) with the <style> tag.
<style type="text/css">
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>
Leaving px; in the width and height attributes might cause a rendering engine to balk.
Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.