Change the Z Index of Flash Content

Change the z index of flash content

Make sure you set the wmode to transparent for your flash content.

Css z-index and transform weird flash

The fix is actually simple - just add transition-property: transform because that is what you want to transform (transition-property: all is the default and z-index is also transitioned).

See demo below:

$('body').on('click', function() {

  var box = $('#a2')

  box.one("transitionend", function() {

    box.css("zIndex", -1).removeClass('t').addClass('t2')

  }).addClass('t')

});

.box {

  position: absolute;

  width: 250px;

  padding: 10px;

  background: #fff;

  box-shadow: 1px 1px 5px #484848;

  left: 0;

  top: 0;

  height: 370px;

  box-sizing: content-box;

  transition-duration: 0.5s;

  transition-timing-function: ease;

  backface-visibility: hidden;

  transition-property: transform; /* added */

}

.box img {

  display: block;

  position: relative;

  backface-visibility: hidden;

  user-select: none;

}

#a1 {

  z-index: 0;

  transform: rotate(-4.5884deg);

}

#a2 {

  z-index: 1;

  transform: rotate(7deg);

}

.t {

  transform: translateX(370px) rotate(23deg) !important;

}

.t2 {

  transform: translateX(0) rotate(-7deg) !important;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="box" id="a1">

  <img src="http://interactivepixel.net/tst/01.jpg" alt="Sample Image" />

</div>

<div class="box" id="a2">

  <img src="http://interactivepixel.net/tst/02.jpg" alt="Sample Image" />

</div>

IE7 z-index problem with Flash content

You can give this inside the object tag

<param name="wmode" value="transparent">

Flash AS3: How Do I Change the Z-index of a Constructed Graphic?

The parent's Graphics is always behind all parent's children. You should make yourself another Sprite or Shape object, place it on top of your display list, and draw on its graphics instead.

var spectrum:Shape=new Shape();
addChild(spectrum); // if last added, will be on top
function everyFrame(e:Event):void {
     var g:Graphics=spectrum.graphics; // that's all you need to change!
     // the rest of code follows
}

flash z-index problem

setting the wmode to opaque or transparent is your only option to get it to respect the z-order of your html. this has some drawbacks as you've noticed, but it's all a tradeoff, the other option is to rearrange your gui so this won't happen.

Arrange (z) order of objects in Flash with ActionScript 3?

You can change the z-index (stacking order) of a movie clip within a same layer using action script like this.

parent.setChildIndex(childObject, i)

Change childObject to the name of the movie clip you want to change the z-index, change i to an integer (the desired z-index value).

If you want to make this happen on a mouse event, put above code inside a function and attach an event listener to a button to invoke this function on a mouse event.

z-index and flash components

Change the wmode from window to transparent for your swf file. This should fix it.

More info about wmode you can find here

How do I place HTML content above a Flash movie?

Make sure the FlashVar "wmode" is set to "transparent" or "opaque," but NOT the default, "windowed"... then you should be able to use CSS z-index

Google Chrome, Flash and z-index wrong behaviour

Add wmode="transparent" to your <embed> tag. Like the following.

<embed wmode="transparent" 
       height="314" width="516"
       type="application/x-shockwave-flash" 
       id="player"
       name="page_player" 
       src="/swfs/player.swf" 
       allowscriptaccess="always"
       allowfullscreen="true" 
       flashvars="file=/attachments/files/u_t_o_N_1.mp4">

And hide the div of the hello image if that is not necessary.

I hope this helps!

---

Related Topics