Overlap a fixed-position iframe to the very top in CSS - css

I've inserted an iframe to appear in the bottom right corner of the page, and it's fixed in position. Everything is how I want it except that the iframe seems to be underneath (overlapped by) the other elements on the page, such as the paragraphs etc. How do I get the iframe to be above all the other elements so that users can actually use the iframe (which is simply a chatbox). I would still really like it to be in the bottom right corner in fixed position if possible. Thanks in advance! This is the code I have at the moment:
<iframe src="www.stackoverflow.com" width="240" height="370" frameborder="0" scrolling="0" style="position: fixed; right: 10px; bottom: 10px"></iframe>

Apply z-index to iframe
Like this
<iframe src="www.stackoverflow.com" width="240" height="370" frameborder="0" scrolling="0" style="position: fixed; right: 10px; bottom: 10px; z-index:999;"></iframe>

What about position:absolute ? (Make sure that you declare your iframe code after any potential element that could overlap).
Also, maybe we use some code of your to help you (use something like http://jsfiddle.net)

Related

Position image into background

I'm working on a website for a girlfriend of mine.
But I'm stuck positioning a the logo.
Here is the website I'm talking about:
http://xntriek-test.s3-website-eu-west-1.amazonaws.com/
I tried using z-indexes but don't work. I also tried setting an background image for the body.
But then I'm to limited with sizing the image.
I'm using Twitter bootstrap to put this thing together.
At the moment this is the class I'm using for the logo:
.logo{
position: absolute;
top: 25px;
left: 25px;
height: 45%;
width: 30%;
z-index: 1;
}
At the moment I'm positioning the image in a span along side the main content.
But because I'm using position: absolute this wouldn't make a difference were I put it.
If any body has any ideas how I could solve this, maybe a different approach then I'm doing right now. Any help welcome!
You need to modify your CSS along the following:
<div class="span6 offset3" style="position: relative; z-index: 1">
z-index affects positioned elements, so just add position: relative to your span of interest.
I would create a special class "z-wrap" and modify the style sheet.
<div class="span6 offset3 z-wrap">
In CSS style sheet:
.z-wrap {position: relative; z-index: 1}
Reference: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Adding_z-index
Note You may have to adjust the value of z-index depending on any z-index value you may have set in the logo container.
First you are distorting the logo with your css, if you want your image to be responsive position it in an responsive element, position this absolut and let the image adjust it's size.
#logoContainer {
position:absolute;
top:25px;
left:25px;
width:30%;
z-index:-1;
}
img.logo{
width:100%;
height:auto;
}
your html should look something like this:
<div id="logoContainer">
<img src="yoursrc/logo.gif" alt="The Logo" class="logo" />
</div>
Put this right after the opening of your body tag and not in some other elements.
By putting it in other elements the logo inherits their z-index and you can only influence it's z-positioning inside the parent but not on the overall page.
One thing to remember when using the z-index attribute :
Only the elements placed using their "position" attribute (relative, absolute or fixed), can be affected by the "z-index".
So if you want to fix your issue, either put your logo as a background image, either use position in the CSS of the content.

positioning content of an iframe within a containing div

I've got a page which I need to serve via an iframe, but I need to only display part of the page, not the whole thing.
My current code is:
<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>
I thought that the best option would be to serve the iframe within a containing div that has "overflow:hidden" so that it acts like a picture frame. That works, but the problem is that the content I want to show is in the middle of the iframe page and the div is always assuming that 0,0 is the start of the frame. I need to position the iframe so that the div is exactly over the part of the page I want to be visible.
Can I do this?
Use negative values for margin-top and margin-left to position the iframe. Look at the code below:
<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe style="margin-top:-100px;margin-left:-100px" height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>
In the content to appear within the iframe, if you can set an element with an id that marks the very top of the portion of content you want to peak through, then you can set the iframe's src attribute with that anchor on the url
iframe content's HTML:
[a bunch of markup/stuff that you don't want to show]
....
<div id="topOfVisibleArea"></div>
[more markup]
iframe tag:
<iframe height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/#topOfVisibleArea"
width="500px"></iframe>
UPDATE -- BETTER APPROACH:
Or you can just use absolute positioning on the iframe within the div. You'll need the iframe's height and width to be wider and taller in than the window you're fitting it in to accomodate the offsets.
See this example: http://jsfiddle.net/sNSMw/
<iframe name="itunes" src="http://itunes.apple.com/us/album/threads/id509846713" frameborder="0" width="500" height="600" onload="window.frames['itunes'].scrollTo(250,250)"></iframe>
Trick is all in the iframe style parameters. Placing in additional containers will help with alignment requirements.
<div style="border: 1px solid red; width: 70px; height: 20px; overflow:
hidden;"><iframe style="width: 400px; height: 800px; margin-top: -200px;
margin-left: -200px;" src="http://www.amazon.co.uk/product-reviews
/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&
sortBy=bySubmissionDateDescending" width="320" height="240"></iframe>
</div>
Credit to spamtech.co.uk for the help and examples: http://spamtech.co.uk/tips/position-content-inside-an-iframe/

CSS - style similar to GOOD?

I frequent a website called GOOD and I love one aesthetic style in particular; how the navigation bar extends its colours across the background of the website. You'll see what I mean if you visit the site.
In CSS, how could I replicate this in the most simply way possible? I've tried all sorts of things with z-index/margins/float and it simply isn't happening.
Just put A div (position'd absolute) in the back with the menu in it and put another div, with the actual content in it over that.
Little example:
<html>
<body>
<div style="position: absolute; top:200px; left:0px; width:100%">The menu here, at A 100% width</div>
<div style="position: absolute; top:0px; left: 0px;">The content here.</div>
</body>
</html>
That should work!
Hope that helps.
Its all about position: absolute. The nav container which holds all of those links is given this CSS property which removes it from the normal flow of the page. It has top: 165px to set it where it is positioned. Each of the links are given the display: block property which means they will fill their parent which in this case is 100% of the width. A span tag is then used inside the 100% width links to set the text where it is.

CSS: Image touching edge of screen

Check out this web page: http://dev.driz.co.uk/attachment.htmldead link
As you will see you get a sidebar fixed and a div that is positioned absolute and allows a user to scroll around a giant image. All works great, expect that if you scroll to the right you will see that the image is touching the edge of the screen and does not have the 40px padding like the rest of the content? Any ideas why?
Thanks
Float this div left
div#attachment div.padding {
float: left;
padding: 40px;
}
This would also work:
<div class="padding" style="position: inherit;">
<img src="http://dummyimage.com/1440x900/00aeff/fff">
</div>

Ways to set up a video as a background 'image'

I need to set up a website with a video as the background.
Will I be able to use z-index to position other elements on top of the video? Is there a better alternative?
I have not tested it, but you could try to set width/height of <video> to 100% then using z-index let all the others element stay on top of it...
Edit:
for example to set video as background entire page
<body style="height: 100%;width: 100%">
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video src="" width="100%" height="100%" autoplay>
Your browser does not support the video tag.
</video>
</div>
... rest of your site
You can not apply it as a CSS background (background property). You can give the effect though using layers which is controlled via the z-index property.
If you are using flash as your video playing method no - flash is ALWAYS on top of anything regardless of z-index, But I imagine this could be done by using the new HTML5 <video> tag.
Failing that convert to a high-frame rate animated image and set as BG...

Resources