CSS3过渡到不影响其他元素？

Question

Is it possible to have height transitions that don't affect the position of nearby elements?

This particular case involves divs with float:left.

Demo: http://ashleystewart.me/

I'd like the hover transition to go on top of the element you can see moving around.

Answer 1

Give the container boxes Relative positioning and the fly-out details box Absolute positioning. Since Absolute positioned elements are removed from the layout, it wont interfere with the floats.

demo: http://dabblet.com/gist/3729269

Answer 2

I'm afraid that in the current layout-logic you're following, it'd be very hard to fix.

Why? Because like your floats in the first row are aligned next to each other, when a box in the upper row is expanded on :hover , the float s in the bottom row will reposition relatively to that one as well.

Here's how I would go about achieving your idea:

• Don't use float ing, use something like display: inline-block; .
• Your semantic article wrappers are causing issues when using inline-block; . Either get rid of them (oops, might not be SEO friendly), or make sure you aren't relying on overflow: hidden; when styling your "boxes."

Sorry I couldn't be of more help!

Answer 3

You can use position property instead of using float property, you can do following:

#idname {
   position:fixed;
   margin-right:100px;
   margin-left:100px;
   margin-top:100px;
   margin-bottom:100px; /* I had written 100px only for example you can adjust it according to your screen */
}

#idname:hover {
   -moz-transtion: /* adjust the setting here for Firefox */;
   -webkit-transition: /* adjust the setting here for chrome and safari */;
   -o-transition: /* adjust the setting here for Opera */;
}

This will enable the moving of div and its position will be fixed.

Answer 4

You could use a transition on a transform by using. Transform will change the element without effecting layout. You would want to use transform: scaleY() say you wanted to double the height of something:

transform: scaleY(2);
-webkit-transform: scaleY(2);
-moz-transform: scaleY(2);
-o-transform: scaleY(2);

Answer 5

Put the <div> in a proper positioning. Keep the outside ones in position:fixed and the inner ones in position:absolute

Or the other way is to make the maximum height fixed for the outer <div> and the inner <div> should be kept the maximum transformation height equal to the outer one. It will help in not making other <div> getting affected on transaction

Or the other way can be, use blocks to display the content, rather using float way

Answer 6

您可以使用position: absolute而不是position: fixed ，这样当您打开Web开发人员工具时div不会移动。