Problem:
Essentially I have a row of in-line containers with images inside them, and an overlapping div with text at the bottom of the div/image. When the window is resized horizontally, the image and div snap to the row below it and stay inline. However, the overlay does not snap with them until it is completely covered by the horizontal resize of the window, which only then it will snap below the row and appear with the rest of the container.
If you keep resizing the window horizontally, eventually the overlay div will snap down and appear in its correct position.
Question:
How can I make it, via CSS, JS or jQuery, so that the overlay div follows the container it's in when the overflow forces the containers into the next row?
#container {
position: relative;
display: inline;
}
#overlay {
position: absolute;
display: inline;
text-align: center;
height: 20px;
background-color: gray;
width: 304px;
bottom: 0;
}
<div id="container">
<div id="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
<div id="container">
<div id="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
Example Fiddle: https://jsfiddle.net/buqbxgzz/2/
There are several issues with your code:
You are recycling IDs in your markup. IDs must be unique in a document. For example, use .container instead of #container.
Using position: absolute and display: inline on the overlay doesn't make a lot of sense, because it will be set to block level automatically (i.e. display: block).
Also, as long as you switch to display: inline-block on the container elements, the positioning will work. The reason is a bit convoluted, but if you look at the elaborate description of stacking contexts by W3C, you can see that inline level elements have a very different (and probably counterintuitive) characteristics described, compared to inline-block or block elements.
.container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
text-align: center;
height: 20px;
background-color: gray;
width: 304px;
bottom: 0;
}
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
See fixed fiddle: https://jsfiddle.net/buqbxgzz/4/
Try:
#container {
position: relative;
display: inline-block;
}
Specify the width to the container instead of the overlay div node and give the latter element a 100% width. Here is the code:
#container {
position: relative;
display: inline-block;
width: 304px;
}
#overlay {
position: absolute;
display: inline;
text-align: center;
height: 20px;
background-color: gray;
width: 100%;
bottom: 0;
}
Here is it working: https://jsfiddle.net/buqbxgzz/5/
Edit:
I've just realized you are using a duplicate ID in your code. ID's must be unique. Change the container and overlay to classes
Is this the thing you are looking for? Btw, id attributes of elements should better be unique. For applying the same styling rules classes are used.
.container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
display: inline-block;
text-align: center;
height: 20px;
background-color: gray;
width: 304px;
bottom: 0;
}
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
Related
I have a container and within it 5 (or more) items (divs) with another 2 child divs, the second (child) div has a background image (declared as inline-style "background" property). Now, I want an infinite cycle/loop of all this images (items with backgroud images) to work, after one iteration the first one become second, second third... fifth become first etc, with some interval.
I was trying some javascript and jquery with no success, is there a way how to do that? Thank you so much for help.
The code is:
<style type="text/css">
.container {
position: relative;
width: 100%;
display: -webkit-box;
display: flex;
}
.container .img {
position: relative;
width: 240px;
height: 240px;
}
.container .img div {
position: relative;
background-size: cover;
background-position: center;
width: 240px;
height: 240px;
opacity: 0.9;
cursor: pointer;
}
.container .img div:hover {
opacity: 1;
}
</style>
<div id="s" class="container">
<div class="img">
<div style="background: url(https://picsum.photos/id/271/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/221/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/101/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/22/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/11/240)"></div>
</div>
</div>
setInterval(function(){
$i=$(document).find('.container .img:nth-child(1)');
$i.clone().appendTo( ".container" );
$i.remove()}, 5000);
Basically, I have a page that should load 3 pngs when you press the button. The problem I'm having is that I have one image #heart that I want to overlay onto a #background. I've tried different permutations of positioning but it (the #heart image) won't move at all, even with a high z-index over the lower layer. It won't even move to the right with left: x px
Sorry. I'm still pretty new. I'm completely stuck as to how to proceed. Developer tools just tell me that it's sitting in an image div above where I want it to be... Here's the code:
#heart {
z-index: 99999;
left: 200px;
top: 100px;
height: 100px;
width: 100px;
position: relative;
}
#background {
width: 800px;
margin: 0 auto;
display: none;
z-index: -10;
position: relative;
}
<div class="action">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal"></div>
</div>
To make this you will have to use some others css properties like flex and background-image and update you HTML DOM just like this:
#heart {
height: 100px;
width: 100px;
}
#background {
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height: 500px;
background-image: url("https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png");
background-size: cover;
background-position: center;
position: relative;
}
<div class="action">
<div id="background">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
</div>
</div>
When you give an element "position: relative", it keeps it's place in the document flow, so when you change it's position on the page with top: 100px or whatever, it moves but the space it vacates is not removed from the document. Therefore, nothing moves in to take it's place and z-index does nothing.
Try this:
<div class="action">
// Switch the two images in the document flow to make this easier, although you can ignore that if you want.
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<div id="bennyNormal"></div>
</div>
So now, #heart is no longer "below" the #background image in the document flow. bennyNormal div is still "above" everything inside the #action div but because the #background image comes first (with a relative position (or even if it had no position) #background will keep the div below it on the page in the doc flow. If you also give #background display: block it will stop the div from moving up, if that ever becomes an issue.
Then:
#heart {
z-index: 99999; <== this is irrelevant now. get rid of it.
left: 200px; <== change these to position over #background as you wish
top: 100px;
height: 100px;
width: 100px;
position: absolute; <== important bit.
}
#background {
width: 800px;
margin: 0 auto;
display: none; <== You want it invisible? Should be block.
z-index: -10; <= Same with this. Don't screw around with z-index if you can avoid it.
position: relative; <== This no longer matters, but you can still include it
}
As nitin9nair comment, setting #heart { position: absolute; } seems to be enough
#heart {
position: absolute;
top:200px;
left:320px;
}
<div class="action">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal"></div>
</div>
so I have some HTML that looks like this:
<div id="container">
<svg id="chart1"></svg>
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
</div>
With corresponding CSS like,
svg {
/*display: block;*/
position: relative;
z-index: 1;
}
html, body, #container, svg {
margin: 0px;
padding: 0px;
height: 80%;
width: 100%;
}
#logo {
position: absolute;
z-index: 10;
top: 15px
left: 15px;
}
you would think that the div with the image would be placed on top, right? (there's no separate CSS styling for chart1)
But this is what it shows, and it won't budge.
Edit
#container {
position: relative;
}
didn't change anything sadly enough.
The whole code (minus Javascript underneth that makes the D3 graph/svg):
Have you tried following sequence to get logo to the top of the chart:
<div id="container">
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
<svg id="chart1"></svg>
</div>
Also, remove semicolon at the end of img holder <....src="cubs_best.png";>
I have a container div with an image overlayed on top of it.
I want to center this container div within a basic popin. I am sure it has something to do with the overlay approach I am using within the CSS, but I cannot figure it out. How can I center the container dev within the popin?
EDIT: There are several of these blocks placed in-line.
CSS and HTML are as follows:
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
.popin{
background:#fff;
padding:15px;
box-shadow: 0 0 20px #999;
border-radius:2px;
}
#underlay1 {
width: 320px;
height: 320px;
position: relative;
}
#underlay2 {
width: 320px;
height: 320px;
position: relative;
}
<div class="row">
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay1"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay2"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
</div>
Underlay is receiving an image from an API. overlayimage.gif is another image being placed on top.
Just remove float: left; from .containerdiv and give text-align: center; to .popin will solve your issue.
You can center absolute div like following way:
left: 50%;
transform: translate(-50%, 0px);
http://jsfiddle.net/5z2k1b1r/
Edit:
use margin: 0 auto; for #underlay as per your expected output.
Check Fiddle
I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.
I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.
Maybe it's something to do with position relative and absolute, I don't understand it very well yet.
themeexp1.tumblr.com
Edit: It's not the 14px margin, it's a much bigger margin
Empty space: http://postimg.org/image/hiixhonoh/
HTML
<div id="content">
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="photo inner">
<a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a>
</div>
</div>
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
</nav>
</div>
CSS
#content{
margin: 0 auto;
position: relative;
}
.container{
margin-bottom: 14px;
}
.container-overlay{
width: 100%;
height: 100%;
opacity: 0;
position:absolute;
}
.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}
#pagination{
display: none;
position: absolute;
}
It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.
Example Fiddle