CSS - creating a DIV mask

HTML & CSS
1

Hello,

I am wondering if it is possible to do the following:

I currently have some script from an external site which i am placing on my site. I have placed this script within a DIV which is correctly positioned (it is where i want it)

Now, i want to place another DIV which would sit directly on top of the iframe, basically acting as a mask to part of what the iframe generates. Is this possible? I.e i would have two divs on top of each other.

From what i understand it may be possible using absolute positioning and/or z-index.

The problem as far as i can see is when i position something to an absolute position it positions it absolutely on the page - not so effective when resoultions can change etc. Can i position something absolutely relative to the div i have placed it in… eg:


<DIV id"holder">
    <script iframe.....>
</DIV>

Would it be possible to put a div called mask to cover the top of the iframe, so that the mask is postioned absolutely relative to the parent DIV?

Any help is appreciated!

Many thanks

Matt

2

You could give the #holder div a position:relative to act as the stacking context for AP elements.

Then just have an element inside there with position:absolute and it should layer on top of the iframe :slight_smile:

3

would the clip property not work for the iframe, considering you have to give it absolute height/width ( even if don with js)

4

Well I’d need a visual to fully understand waht you mean (I always have trouble visualizing what people actually want on here)
http://www.w3.org/TR/CSS2/visufx.html#clipping

The element you are applying clip to does need AP though.

5

Yes you could clip a rectangular area of the iframe. Whether that would solve the OPs question would depend on what parts of the iframe was required to be hidden.

Would it be possible to put a div called mask to cover the top of the iframe, so that the mask is postioned absolutely relative to the parent DIV?

As long as the iframe didn’t contain something like flash you should be able to layer another element on top of the iframe.

I have to wonder why you are doing this and some people take exception to their sites being shown in an iframe in someone else’s site (especially if you are trying to hide something in it) .:slight_smile: