The only way I know to get a layer on top is to use position: absolute.
(top good, bottom bad)
Once you do that you pretty much lose the option to scale dynamically with the rest of the page.
Sure you can do some width: calc(62% - 60px); hacking and get it almost there, or you can write a script that calculates the size etc..
But is there really no way to have a layer on top and still have it scaling with the page?
Its possible with position:relative; Relatively positioned elements takes the width of parent & can be bring on top by using z-index. z-index is applicable only on positioned elements.
Sample Code:
.menuParent{
height:34px;border:1px solid black;
}
.menu{
width:100%;position:relative;border:1px solid red;top:34px;z-index:1;background: white;
}
<div style="width:120px;" class="menuParent">
<div class="menu">
<div>AirBnb</div>
<div>Booking.com</div>
<div>Expedia
<div>Agents</div>
</div>ThaiHome</div>
</div>
<div> Other div below the menu list</div><br/><br/><br/><br/><br/>
<div style="width:240px;"class="menuParent">
<div class="menu">
<div>AirBnb</div>
<div>Booking.com</div>
<div>Expedia
<div>Agents</div>
</div>ThaiHome</div>
</div>
<div> Other div below the menu list width bigger width</div>
parent{
position: relative;
}
child {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
So here's the link to my site. I wanted the right container to scroll in place. How can I do this? I tried adding position: fixed to the right column but then that destroys the layout. Right now the overflow always scrolls all the way to the top.. Basically I wanted insta-shop-grid to scroll inside that container itself.
I edited it as inline style
see if it works. add them to a class.
<div class="directory-container container" style="
max-height: 400px;
z-index: 1111111;
overflow: scroll;width: 100%;
margin-top: 361px;
">
and add <body style="overflow:none">
But website really needs some responsive designing. i used 400px and 360 for margin as padding was already there. :) still I hope this will work
Adding z-index: -1 to the main content, prevents it from scrolling above the banner.
See simplified JSFiddle.
Update:
Stealing from #Anobik, I modified my example, removed the z-index and added a fixed wrapper around the main content
HTML:
<div class="banner">Banner</div>
<div class="nav">Navigation</div>
<div class="container">
<div class="content">Main content</div>
</div>
CSS:
.container {
position: fixed;
top: 60px;
left: 125px;
width: 75%;
height: 400px;
overflow: scroll;
}
JSFiddle
I'm trying to get a layout in HTML/CSS done. The goal is about this:
Some elements in this layout have a non-fixed size. The area on the left has fixed width, the footer has fixed (content matching) height. The list on the left shall be extending it's height, the text in the footer it's width and the canvas both dimensions so the entire browser page is filled, but without causing any scrollbars to appear. Oh, and B is for button, but that's not really of importance I guess.
I have seen some examples (this) and references (this) and tried to learn from them, but I can't get it the way I want. One of the closer attempts I have made is this one:
<html><body style="margin: 0; padding: 0;">
<div style="position: absolute; background: #afa; top: 0px; bottom: 0px; left: 0; right: 0px;">
<div style="position: absolute; background: #afa; top: 0px; bottom: 0px; left: 0; width: 240px;">
<input style="width: 240px" id="selectedPosition"></input>
<select style="position: relative; width: 240px; height: 100%;" id="points" multiple="multiple"></select>
<div style="position: relative; background: #afa; left: 0; width: 240px;">
<input style="width: 80px" type="button" value="Add"></input><!--
--><input style="width: 80px" type="button" value="Up"></input><!--
--><input style="width: 80px" type="button" value="Down"></input>
</div>
</div>
<div>
<div><input style="position: absolute; bottom: 0px; left: 0px; width: 100%"></input></div>
<div><input style="position: absolute; bottom: 0px; right: 0px;" type="button" value="Button 4"></input></div>
</div>
<div style="position: absolute; background: #aaf; height: 100%; left: 240px;top: 0px;right: 0px; overflow: auto;"></div>
</div>
</body></html>
Problem here is the lower elements ant the button in the bottom right are covered by size extending elements. I probably could fix this with fixed dimensions or margins, but I'd like to have it done in a "proper" way.
Another approach was to use a 4x5 table with spanning rows and columns, but I got confused even more and quickly let that drop.
I'm fairly new to layouting in HTML/CSS, so any source "for dummies" in this matter helping me getting the job done in spite of an actual solution is appreciated also.
Update
After looking at the links and at Fico's answer. However, the closest attempt is this. Problem is that both the list and the bottom text overlap the respective button(s) when width/height is set to 100% (in the jsfiddle example I used lower numbers for demonstration purposes). As a side note, the list in the example given does not extend vertically at all. When using my local file, then it does.
All examples I have seen with a fixed footer and height filling columns use some fixed size height for the footer which is then negatively applied as margin, but my footer should just wrap it's content. Isn't there any way to set up a rule "extend until you reach the next element"?
Start by using markup for content and css for styling.
You will work cleaner and with less trouble.
It's not a good practice to include so many tags instead of using an external CSS (or eventually embedded in the HEAD of the document)
It doesn't seem to me, you are in the need of so much absolute positioning here.
Identify your big areas in your design (as the figure below)
First impression is that you got an aside column at the left width some elements in Normal document flow and in its bottom three buttons floating in a div
The canvas could be floating left or right of this aside
Both , the aside and the canvas , contained in a mainContainer div.
The text and button at the bottom could be integrated in a footer with the button floating right or left at your will
The flexible solution is simple to instrument. Use some min with properties for your canvas and probably some fixed widths for the aside.
I have a container div. Inside that div are three graphs aligned at 700px intervals (the width of the container). The idea is that the other 2 graphs will be hidden off screen which I can then, with jQuery, slide across when a user interacts with various controls on the web page.
A simplified version of my code is like so:
Style
#graphcontainer {
height: 260px;
overflow: hidden;
width: 700px;
}
.graph {
position: absolute;
}
HTML
<div id="graphcontainer">
<div class="graph" style="left: 0px;"></div>
<div class="graph" style="left: 700px;"></div>
<div class="graph" style="left: 1400px;"></div>
</div>
For some reason the second and third graphs, which are positioned off to the right, are still visible! How do I ensure they are not visible?
First you have to set, position:relative for the parent. Then, you have to set the height of the parent.
Demo: http://jsfiddle.net/Scfdk/
You need to add position: relative; and set a height to the element you have overflow set to hidden on.
if you want to hide a div, have you considered "display: none"? For example,
<div class="graph" style="display: none"/>
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.