Back to basics, I have a situation whereby I have an image which needs to appear over the background of an element just below it. However, I do not want the image to be over the top of the content of that element, only the element (and background properties) itself:
http://jsfiddle.net/chricholson/4twr5/1/
HTML:
<img src="https://www.google.com/images/srpr/logo3w.png" />
<div>
Hello World
</div>
CSS:
img { position: absolute; z-index: 20; }
div { position: relative; top: 45px; z-index: 10; padding: 30px; background: red; }
a { position: relative; z-index: 30; padding: 10px; background: yellow; display: block; }
Expected behaviour would be the image to appear over the top of the div background [check], but then appear behind the yellow link, which it isn't.
Found my "answer" (more confirming my doubts) here Can't get z-index to work for div inside of another div. The key sentence being "Once you set position:relative on test_1 you are causing its z-index to be in a different world than the z-index of test_2."
It seems the reason I have a problem is because once I have set the image higher than the div, no matter what z-index value I set to the contents of the div it will always be covered. I didn't think z-indexes worked like this, I thought everything was "separate" and so long as a value was higher than a value elsewhere (regardless of parent containers) things would be fine.
img { position: absolute; z-index: 15; }
div { position: relative; top: 45px; z-index: 20; padding: 30px; background: red; }
a {z-index: 30; padding: 10px; background: yellow; display: block; }
You can try this code. By the way a is a child of div. You don't need to type position: relative; Because you wrote for div.
Put the image inside the div like so:
<div>
<img src="https://www.google.com/images/srpr/logo3w.png" />
Hello World
</div>
Most of the answers here are pointing out the base truth: in straight up HTML + CSS, this is probably only possible if the <img> is inside of the <div> and a sibling to <a>.
Since you've indicated that you can't change the HTML, you could instead apply a simple JavaScript that would reorder the DOM as necessary for you: $('div').prepend($('img'));. (This is JQuery, by the way.) What this does is it takes the <img> and sticks it as the first child in <div>.
Of course, if you were to use this in production code, you'd want to append id's to the elements and select off that otherwise you'd have images being stuck into divs willy nilly.
Here is a JSFiddle demo. The JQuery is called onDomReady(). The HTML itself is unchanged.
http://jsfiddle.net/4twr5/21/ Look this jsfiddle
Update according to comment http://jsfiddle.net/4twr5/22/
Related
I apologize if this has been answered time and time again. I remember searching thoroughly for an answer a couple years ago when I first wrote up my website script, but I couldn't ever find one. The same for now.
Recently I reworked my website's script so I can host it onto Weebly. Here is one of the four pages of my site that I need help with. As you can see, the images that pop up when the thumbnail is hovered over are absolutely positioned. For most computer resolutions and/or browsers, this will have the image appear out of the designated box.
How could I position them to the inner top left corner of the div? Or better yet, horizontally and vertically centered within it?
<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />
a:hover img.Small
{
border: 5px solid #21568b;
margin: 10px;
text-decoration: none;
}
section#Sizes a img.Large
{
border-width: 0;
height: 0;
left: 438px;
position: absolute;
top: 326px;
width: 0;
}
section#Sizes a:hover img.Large
{
height: 526px;
left: 438px;
position: absolute;
top: 326px;
width: 520px;
}
.Popup
{
border: 3px solid;
float: left;
height: 272px;
margin: 8px 20px 0px 0px;
padding-top: 254px;
text-align: center;
width: 520px;
}
Thank you for your time. :)
Your whole design is a bit fragile, and I wouldn't recommend building this this way in the first place, but you're looking for practical answers, so here's the smallest change I can think of that fixes your problem:
1) Add this to your style sheet:
body { position: relative; }
2) On line 40 from your main_style.css, change top: 326px to top: 316px and left: 438px to left: 428px, so that it becomes like this:
section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}
How does that work?
Your images are place using absolute positioning. By default, that works relative to the viewport (the window). But by turning the body into position relative, it becomes a containing block, and position absolute is relative to the nearest containing block ancestor.
So now, your images are fixed within the body element, instead of being fixed relative to the window. Since the margins of the body element is what's changing size when you resize the window, that makes the various pieces of your content fixed relative to each other. You then just need to remove 10px from the top and left side, since that's the size of the border of your body element, and we're now measuring from inside the border.
TLDR: You can't do this in pure CSS.
You can easily position the image inside the container div if you place the image element inside the div element, and then use absolute positioning like top: 0; left: 0; (or with a number of other methods). But then you'd need JavaScript to correlate the hovered thumbnail with the popup full-size image.
Alternatively, you can have the full-size image be nested in the thumbnail element (like you currently have), but then you'd need JavaScript to position the full-size popup image inside the container div.
Of the two alternatives, I recommend the first: put all the popup images inside the target container, and use JavaScript to show or hide them when a thumbnail is hovered. Correlating the thumbnail and the full size image via JavaScript is going to be easier then writing positioning code.
I see you're using jQuery already so why not do something like this?
$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});
$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
Just because everyone was saying it can't be done with pure css, I wanted to demonstrate that it can, and it is even quite easy. Have a look at the folowing example:
http://jsfiddle.net/aafa2zp5/
<div id='images-wrapper'>
<ul>
<li>
<img class='small' src='http://placehold.it/50/ff0000'/>
<img class='big' src='http://placehold.it/300/ff0000'/>
</li>
<!-- and some more similar thumb / image groups -->
</ul>
<div class='preview-area'></div>
</div>
CSS (or the relevant part at least)
#images-wrapper {
position: relative;
}
.big {
display: block;
position: absolute;
top: 54px;
right: 54px;
opacity: 0;
transition: opacity .5s;
}
.preview-area {
width: 350px;
height: 350px;
border: 4px solid blue;
position: absolute;
top: 21px;
right: 21px;
}
li:hover .big {
opacity: 1;
}
The key is to set a position relative to the wrapper (and keep all of the descendants as their default static). Then you can use this to position the preview area and the big images against by setting them to postion absolute and carefully calculating the correct postion. I even added a cross fade, just because it is so easy, but you could just as well work with display block / none if you prefer.
For smaller screens you may want to alter the dimensions and positioning inside a media query, but it still should be doable (though depending on the hover state is perhaps not the best idea on a touch device)
I hope you get the idea and you can figure out how to apply this technique to your own site. Feel free to ask if you want me to explain further or when you get stuck.
I have been researching how I could apply a user agent stylesheet to a div.
Is this possible?
Specifically, I want to apply the user agent stylesheet of input to a div within one of my web applications.
I don't believe that there is a way to make one element inherit the styles of another easily. You could try to loop over an input's computedStyle and apply it to a div, but that may do more than you want (i.e. it will probably pick up its size and shape as well). It also isn't particularly elegant:
https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle
One thing you might do is to put an input absolutely positions inside the div, and set it to the div's full height and width, so it stretches over it. Then disable it but set the background color to white. Or, put another div over the top of it to prevent clicks on it and take it out of the tab order:
JSFiddle: http://jsfiddle.net/p040gdos/
HTML
<div id="container">
<input id="backgroundInput" tabindex="-1" />
<div id="cover">content goes here</div>
</div>
CSS
#container {
height: 100px;
width: 100px;
position: relative;
}
#backgroundInput {
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
#cover {
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
I have a fixed navigation bar on my website that stays at the top with links that take me to different sections further down the page. However, because my fixed nav bar has a height of 40px, the beginning 40px of every section is covered up. How would I offset where my links take me by 40px using either HTML or CSS?
Thanks.
You might try absolutely positioning "dummy" anchors 40 pixels above the top of each section. You can give them zero width/height and hidden visibility to ensure that these anchors don't affect how your page is displayed. When the user clicks one of the links in your fixed navigation bar, the window will scroll to the top of the dummy anchor, 40 pixels above the beginning of its actual section.
Example HTML:
<div class="navbar">
Anchor 1
Anchor 2
Anchor 3
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>
Example CSS:
body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}
For a working example, see http://jsfiddle.net/HV7QL/
Edit: CSS3 also includes the :target pseudo-class, which applies to an element whose id has been referenced by the href of a link in the document, or the hash value of the URL. You can apply a 40-pixel padding to the top of the :target that will be applied only to the section the user selects from the fixed navbar.
Example CSS:
.section:target {
padding-top: 40px;
}
This is semantically cleaner than the method described above, but won't work on older browsers.
Working example: http://jsfiddle.net/5Ngft/
I just happened to stumble across this problem myself today so I had been thinking about it for a bit already, but I think I just found a solution:
Add a padding-top: 40px; margin-top: -40px to the element that you want to jump to. The negative margin cancels the padding, but the browser still thinks that the top of the element is 40px higher than it actually is (because in fact it is, only the content of it starts lower).
Unfortunately, this might collide with already set margins and paddings, and if you're using a background on the targeted element it's going to mess it all up.
I'll see if I can work around that and post a jsfiddle, but in the meantime here's a basic answer at least :)
edited: I thought I had a solution for the background, but it didn't work. Removed again.
final edit:
It does kind of work if you know the background color of the wrapping element. In my example I know the text is on a white background, but the titles have a silver background. To prevent the title from having a background on the extra padding we set, instead I put it on a pseudo-element before it:
#three:before {
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}
This way the extra padding has a white background again, but this only works if you already know what background it needs. Setting it to transparent for example will show the underlying background of the title itself, not of the article.
jsFiddle: http://jsfiddle.net/Lzve6/
Heading one is the default one you're having problems with.
Heading two is my first solution, guaranteed to work on almost all browsers
Heading three is using the :before pseudo-element, might not work on older browsers.
How we can add a div tag over a slideshow like in the following link
http://www.hellofresh.com/
Here the div with title "DISCOVER THE JOY OF COOKING " is placed over a slideshow.
How might I do this?
First of all, welcome to Stackoverflow (oops; this isn't your first question!). The key to placing your div over the slideshow (or over any other element) is using absolute positioning. Absolute positioning enables you to specify the exact position for an element instead of leaving it with the flow of the document. If you take a look at your example website's CSS, you can see that the div that has "Discover the joy of cooking" is styled basically like this:
position: absolute;
top: 0px;
left: 0px;
top and left act somehow like x and y in a 2-dimensional grid system, except that the origin is placed differently. top: 0px; pulls the div up and left: 0px; pulls the div left, so all-in-all, it's placed on the upper-left corner.
To achieve the effect of the translucent black, you use the opacity property. opacity: 0.5; means that the div is half-opaque, while opacity: 0; means it's not visible at all. Your favorite value might be something like opacity: 0.7; -- anything in the range 0...1.
The last piece here is to tell the browser that the div should be over the slideshow, not behind it. To do that, use the z-index property. z-index specifies the relative "stack order" of elements. So if you want your div to be over the slideshow, style it with z-index: 5; while styling the slideshow with z-index: 1;, for instance.
Hope that helped at all!
Ok, you can do something like this ( http://jsfiddle.net/YgpqX/ ):
<div class="div1"></div>
<div class="div2"></div>
.div1 {
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
width: 100px;
height: 100px;
margin-top: -200px;
background: #5aa;
}
Or ( http://jsfiddle.net/YgpqX/1/ )
<div class="div1"></div>
<div class="div2"></div>
.div1 {
position: relative;
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
position: relative;
width: 100px;
height: 100px;
top: -200px;
background: #5aa;
}
And if your block in html should be earlier then slider block, then use z-index: 9999; to get it up.
And also abolute position:
<div class="div1">
<div class="div2"></div>
</div>
.div1 {
position: relative;
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
background: #5aa;
}
By setting the opacity property in CSS
This is some basic info on this one W3schools Css opaque
They are accomplishing this effect using CSS Positioning. Basically they are absolutely positioning the discover the joy of cooking block over the slide show. You can use z-index on the absolute position div to bring it over the relative position (slideshow) div. Basically you need to use a combination of position and z-index. I have a basic example of the CSS/HTML here: http://jsfiddle.net/jqVAe/1/
HTML:
<div id="slideshow">
Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here.Scrolling sideshow goes here.
<div id="over-slideshow"></div>
</div>
CSS:
#slideshow{
width: 400px;
height: 200px;
position: relative;
background: green;
}
#over-slideshow{
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background: red;
}
This provides a basic structure in which to put your slideshow. I would recommend finding a good slide show plugin and not trying to reinvent that functionality. I'm sure there are plenty of Jquery (Javascript Framework) plugins that will accomplish this task for you.
You may try position: absolute and z-index. z index is used to align a layer over or under a layer. You may go through;
Lesson 15: Layer on layer with z-index (Layers), Understanding CSS z-index, and A Detailed Look at the z-index CSS Property