Position Fixed in Chrome

问题:

I have a little problem with my site, I have a bar and on it a box that float above the bar, everything works fine in IE, Firefox, Opera, but in Chrome and Safari the box that must be above the bar float by the bar side no above it.

 #barraDerecha 
 {
     width:240px;
     background-color:#e5e5e5;
     border-left:solid 2px #CCC;
     border-bottom:solid 2px #CCC;
     position:absolute; 
     margin-top:-10px;
     margin-left:717px;
     height:auto;
 }

 #barraDerecha #menu
 {
    display:block; 
    position:fixed;
    width:220px;
 }

barraDerecha is the container and menu is the box that goes above the container

Can somebody help me please?

Thanks in advance

回答1:

Just in case someone is getting the same chrome behaviour.

It looks like chrome considers that the viewport of an element added to the DOM after the page is loaded (for instance, using jQuery.load()) is restricted to the containing div of this element.

I guess .asp is injecting your barraDerecha after document load, so it positions relative to it's container.

回答2:

Thanks for u answer Thor you can see the example in www.autos.ultimahora.com/altaanuncio.html

I can't put fixed to #barraderecha cause in that way my bar move with the menu

Here is who I use the class:

<div id="barraDerecha" > 
<div id="barraRight" runat="server">
    <div style="padding:10px;" id="menu" >
        <div class="titulosAzules15">
         <center>
         <asp:Label ID="lblUsted" runat="server" Text="USTED ELIGÍO EL PLAN"></asp:Label>
             <br />
             <br />
         <asp:Image ID="imgPlan" runat="server" />
         <br />
         <asp:Label ID="lblPrecio" CssClass="DestaquesBordo14" runat="server"></asp:Label>
             <br />
         </center>

         </div>


    </div>     
</div>    
</div>

You have to select a plan and then push on Siguiente button

回答3:

Pardon me, but isn't #menu within #barraDerecha?

If so, it would only be natural that it would be fixed within #barraDerecha unless you specify the position furthermore.

#barraDecha {
   position:fixed; top:0; left:0; }

A better description (perhaps a visual) would help i terms of describing the problem more accurately.