3 replies [Last post]
birkin
Offline
newbie
Last seen: 11 years 49 weeks ago
Timezone: GMT+1
Joined: 2009-02-16
Posts: 2
Points: 0

Hi!

I'm trying to get this kind of effect with pure css:

Well, it actually works in gecko and webkit based browsers and opera.. That means every browser except Internet Explorer Wink But in IE7 I get only this:

The basic problem is that the border element (ie.: div) must be inside it's container (red box) but have to be visible over the second (green) box, which is on the same layer in DOM. Here is the code I used to do so:

<html>
 
<head>
<style type="text/css">
.Container{
  position: absolute;
  left: 25px;
  top: 25px;
  background-color: yellow;
  width: 250px;
  height: 250px;
  z-index: 1;
}
#box1{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  background-color: red;
}
#box2{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  background-color: green;
}
#box1 .border, #box2 .border{
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border: 2px dashed #000;
  position: absolute;
  @width: 100% !important;
  @height: 100% !important;
  z-index: 200;
}
</style>
</head>
 
<body>
 
<div class="container">
 
<div id="box1">
  <div class="border"></div>
</div>
<div id="box2">
 
</div>
 
</div>
 
</body>
 
</html>

I've read about some bugs related to z-indexes in IE7 but none of provided solutions solved this problem.
I would appreciate any kind of directions / help Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE differs from other

IE differs from other browsers in that it effectively gives every element with position a z-index of 0. If you add "z-index: 0" to #box1 and #box2 style rules all the other browsers will now work like IE.

For IE, essentially this means, if an element has position, its not possible for any external element (ie. all elements except its children) to interpose itself in the stacking order between the element and one of its children.

The only work-around (whilst still using position) is to reorder your html, either make #box2 a child of #box1 or make .border a sibling of #box1 (and change its % dimensions to pixels).

Another alternative which will work for the html you have shown is to remove position from #box1 and #box2 and to manipulate their location with margins. E.g.

#box1{
  width: 100px;
  height: 100px;
  margin-top: 50px;
  margin-left: 50px;
  background-color: red;
}
#box2{
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: 100px;
  background-color: green;
}
#box1 .border, #box2 .border{
  position: relative;
  top: -2px;
  left: -2px;
  border: 2px dashed #000;
  width: 100% !important;
  height: 100% !important;
}

I guess you've shown simplified html to highlight the problem. Unfortunately, its unlikely the non-positioning solution will work with much more complex html/layouts.

birkin
Offline
newbie
Last seen: 11 years 49 weeks ago
Timezone: GMT+1
Joined: 2009-02-16
Posts: 2
Points: 0

Thank you for your reply,

Thank you for your reply, right now I'm sure that the issue is within my logic.

This is very simplified example of my problem - which appeared in my apllication that transform elements in workbench. My goal is to have transformator (corners) always on top even if there are elements that are higher than selected.

Since I can't use static positioned elements I think I should use another content box and add some events with JavaScript. I thought there was another way to avoid that Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Can you group the corners

Can you group the corners into one element and the content of the box into another. If that's possible, all you need to do is give the corner container a higher z-index that the content container.