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;
}
Related
I created a div that occupies the whole view-port and want the user to scroll down to see more content but after div, when I created an h1 tag the heading is being overlapped by the div.
What I'm doing wrong?
Link to JSFiddle - https://jsfiddle.net/cycse638/3/
I want it like this - Result expected
About position:absolute
As #Mers stated, when you set position:absolute to an element, that element is taken out of the normal flow. As such, all other items below it will be positioned like there was nothing above them (the result: these items are pushed up the document-- in your case H1 pushes itself up beneath your #background).
As such, you'd want position:relative (which often the default), for your #background, so that it will flow together with the other elements in your page (since you said you want to scroll to your H1).
You said occupy the whole view-port
If you want your upper div to be exactly the height of your viewport, then use 100vh, not 100%, for your height. The difference is that 100% will make it occupy all available space (i.e. everything), while the latter only makes it occupy the length equal to the available screen (i.e. not the entire document).
Editing your fiddle
Okay. so here's your modified fiddle:
https://jsfiddle.net/cycse638/5/
...with CSS modified in consideration of the points above. Go to the fiddle, then scroll down the sample output and you'll see that it looks like what you posted here.
note: You can disregard the flex rules I put in your H1. They're there so that it'll look like the one in your diagram. what's important is your #background is positioned relative, with a height of 100vh.
Hope this helps!
you can either use z-index to lower and raise each element or change the opacity of the div, which will still obscure the header to a degree. or you can simply put the header tag within the div like so: <div id="background"><h1>weadfs</h1></div>
#background {
display: block;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: #eee;
z-index: -1;
}
h1 {
z-index: 1;
}
<div id="background"></div>
<h1>weadfs</h1>
#background {
position: relative;
height: 100vh;
width: 100vw;
background: green;
}
<div id="background"></div>
<h1>weadfs</h1>
#background {
z-index: -1;
position: fixed;
height: 100vh;
width: 100vw;
background: green;
}
h1 {
height: 90vh;
position: relative;
top: 200vh;
}
<div id="background"></div>
<h1>weadfs</h1>
I want to have a nested div appear over its parent, while the parent has overflow-y: scroll
<div id="parent"><div id="child"></div></div>
And the css:
#parent {
position: absolute;
width: 150px;
height: 150px;
background-color: green;
overflow-y: scroll;
}
#child {
position: absolute;
width: 100px;
height: 100px;
top: 70px;
background-color: red;
z-index: 2; (????)
}
Want I would like to get is the red div to actually appear over and outside the green one without activation the overflow property.
But it's just rendered over its parent, which then proceeds to overflow with the scrollbar. So it is over the parent, which it naturally is, but not outside it and I sadly can't just ditch the overflow-property. I just want to ignore it for that one element and pretty much change it to overflow: visible.
Child cant exit parent's DIV. You need to use position:absolute, or even two different parent divs.
See here: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
And here's a css trick solutions: https://css-tricks.com/almanac/properties/z/z-index/
Good luck, next time just post the code in jsFiddle.
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/
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
I have read so many tutorials about make flash as background of a header, but there are several code involved on there. Can you explain to me how to make flash as background?
The single most important element involved in making flash media a background (i.e. being able to place stuff ontop of it) is to ensure that when embedding, you're setting the wmode to opaque or transparent. Failing to do so will mean that no matter what, the media will render ontop of the other elements on the page.
Other than that, you just need to use CSS to place content over the media via position: absolute; and possibly allocating a higher value for z-index.
You have to create two div's that are exactly on the same place. Then you put your flash content in div 1 and your content you want "on top" in div 2.
<div id="holder">
<div id="flash_header_background">FLASH HERE</div>
<div id="header_foreground">CONTENT HERE</div>
</div>
Then you style your div's with CSS to they are on top of each other.
#holder {
height: 250px; /* Flash height */
width: 800px; /* Flash width */
position: relative;
}
#flash_header_background {
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
}
#header_foreground {
z-index: 2; /* Puts this div above the background DIV */
position: relative;
height: 100%;
width: 100%;
}
IMPORTANT: Remember to set the wmode of your flash content to opaque or transparent. - Thank you strah for reminding