CSS3 Quá trình chuyển đổi không ảnh hưởng đến các yếu tố khác?

Question

Có thể có chuyển tiếp độ cao không ảnh hưởng đến vị trí của các yếu tố lân cận không?

Trường hợp cụ thể này liên quan đến div có phao: trái.

Demo: http://ashleystewart.me/

Tôi muốn chuyển đổi di chuột để đi trên đầu trang của các yếu tố bạn có thể nhìn thấy di chuyển xung quanh.

Answer 1

Cung cấp các hộp chứa Vị trí tương đối và hộp chi tiết thả ra Vị trí tuyệt đối. Vì các phần tử vị trí tuyệt đối được loại bỏ khỏi bố cục, nó sẽ không can thiệp vào các phao.

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

Answer 2

Tôi sợ rằng trong logic bố cục hiện tại bạn đang theo dõi, sẽ rất khó khắc phục.

Tại sao? Bởi vì như số floats của bạn ở hàng đầu tiên được căn chỉnh cạnh nhau, khi một hộp ở hàng trên được mở rộng trên :hover, các float s ở hàng dưới cùng sẽ định vị lại tương ứng với giá trị đó.

Đây là cách tôi sẽ đi về việc đạt được ý tưởng của bạn:

• Không sử dụng float ing, sử dụng giống như display: inline-block;.
• Trình bao bọc ngữ nghĩa article ngữ nghĩa của bạn đang gây ra sự cố khi sử dụng inline-block;. Hoặc là loại bỏ chúng (oops, có thể không thân thiện với SEO), hoặc đảm bảo bạn không dựa vào overflow: hidden; khi tạo kiểu cho "hộp" của bạn.

Rất tiếc, tôi không thể trợ giúp thêm!

Answer 3

Bạn có thể sử dụng position tài sản thay vì sử dụng float bất động sản, bạn có thể làm như sau:

#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 */; 
} 

này sẽ cho phép di chuyển của div và vị trí của nó sẽ được cố định.

Answer 4

Bạn có thể sử dụng chuyển đổi trên biến đổi bằng cách sử dụng. Biến đổi sẽ thay đổi phần tử mà không ảnh hưởng đến bố cục. Bạn sẽ muốn sử dụng transform: scaleY() nói rằng bạn muốn tăng gấp đôi chiều cao của một cái gì đó:

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

Answer 5

Bạn có thể sử dụng position: absolute thay vì position: fixed, cách này div sẽ không di chuyển khi bạn công cụ phát triển web mở.

Answer 6

Đặt <div> ở vị trí thích hợp. Giữ những người bên ngoài ở vị trí: cố định và những người bên trong position: absolute

Hoặc người kia cách là làm cho chiều cao tối đa cố định cho bên ngoài <div> và khu vực nội <div> nên được giữ chiều cao chuyển đổi tối đa bằng với bên ngoài một.Nó sẽ giúp đỡ trong việc không thực hiện khác <div> bị ảnh hưởng về giao dịch

Hoặc cách khác có thể, khối sử dụng để hiển thị các nội dung, chứ không phải bằng cách phao