CSS3 다른 요소에 영향을 미치지 않는 전환?

Question

근처 요소의 위치에 영향을주지 않는 높이 전이를 사용할 수 있습니까?

이 특별한 경우에는 float : left가있는 div가 포함됩니다.

데모 : http://ashleystewart.me/

나는 당신이 주변에 이동 볼 수있는 요소의 상단에 갈 수있는 호버 전환을하고 싶습니다.

Answer 1

컨테이너 상자에 상대 위치 지정 및 플라이 아웃 세부 정보 상자 절대 위치 지정. 절대 위치 지정된 요소는 레이아웃에서 제거되므로 플로트를 간섭하지 않습니다.

데모 : http://dabblet.com/gist/3729269

Answer 2

나는 현재 레이아웃 논리에서 다음과 같은 사항을 수정하는 것이 두려워요.

왜? 첫 번째 행의 floats이 서로 나란히 정렬되어 있기 때문에 상단 행의 상자가 :hover에 펼쳐지면 맨 아래 행의 float이 해당 행에 상대적으로 위치가 변경됩니다. 여기

내가 아이디어를 달성 가겠어요 방법은 다음과 같습니다

• 는 display: inline-block; 같은 것을 사용 float ING를 사용하지 마십시오.
• inline-block;을 사용할 때 의미가있는 article 래퍼로 인해 문제가 발생합니다. SEO 친화적이지 않을 수도 있습니다. "상자를 스타일링 할 때 overflow: hidden;에 의존하지 않도록하십시오.

죄송합니다. 도움이 될 수 없습니다.

Answer 3

대신 float 속성을 사용 position 속성을 사용할 수 있습니다, 당신은 다음을 수행 할 수

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

이 div의 이동을 가능하게하고 그 위치가 고정됩니다.

Answer 4

을 사용하여 변환에서 변환을 사용할 수 있습니다. 변형은 레이아웃을 적용하지 않고 요소를 변경합니다.

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

Answer 5

당신은 position: absolute 대신 position: fixed, 사업부 때 당신 개방형 웹 개발자 도구를 이동하지 않습니다이 방법을 사용할 수 있습니다 : 당신은 transform: scaleY()은 당신이 뭔가의 높이를 두 배로 싶어 말을 사용할 것이다.

Answer 6

올바른 위치에 <div>을 넣으십시오. 받는 동일한 최대 변환 높이를 유지해야 절대

또는 다른 방법으로 외부 <div> 내측 <div> 고정 최대 높이를 확인하는 것이다 위치에서 외부 것들 사항 : 위치에 고정되고 내부 것들 바깥 쪽.그것은 사용 블록 오히려