Преобразование: масштаб и позиционирование -- css пол Связанный проблема

transform: scale and positioning


2
vote

проблема

русский

Как это, когда я применим шкала преобразования. «Z-индекс изменен»? Что я скучаю? Есть ли какие-нибудь «хитрость» для игры с трансформацией?

 <код> .thumb > a .img-cover{     -webkit-transition: all 1.2s ease-out;border-radius:5px;     -webkit-transform: scale(1); } .img-cover{     position:relative;     overflow:hidden; } .img-cover:before{     position:absolute;     top:0;left:0;right:0;bottom:0;     content:"";     box-shadow: inset 0px 0 100px #f0f;} .thumb > a:hover img {     -webkit-transform: scale(1.1); } ​   

html

 <код> <div class="container">     <article class="thumb">        <a href="#">           <div class="img-cover"><img src="http://placekitten.com/300/120"/></div>           <span>thumb-desc</span>        </a>     </article> </div>​   

Живая демонстрация

Английский оригинал

How is that when I apply transform scale the "z-index is changed" ? What i'm I missing ? Is there any "trick" for playing with transform ?

.thumb > a .img-cover{     -webkit-transition: all 1.2s ease-out;border-radius:5px;     -webkit-transform: scale(1); } .img-cover{     position:relative;     overflow:hidden; } .img-cover:before{     position:absolute;     top:0;left:0;right:0;bottom:0;     content:"";     box-shadow: inset 0px 0 100px #f0f;} .thumb > a:hover img {     -webkit-transform: scale(1.1); } ​ 

HTML

<div class="container">     <article class="thumb">        <a href="#">           <div class="img-cover"><img src="http://placekitten.com/300/120"/></div>           <span>thumb-desc</span>        </a>     </article> </div>​ 

live demo

</div
  
 
 

Список ответов

0
 
vote
vote
Лучший ответ
 

Определите <код> z-index сам, чтобы это сделало бы это для вас.

 <код> .img-cover:before{     position:absolute;     z-index: 10;     top:0;left:0;right:0;bottom:0;     content:"";     box-shadow: inset 0px 0 100px #f0f;} .thumb > a:hover img {     z-index: 0;     -webkit-transform: scale(1.1); }    

Пример код

 

Define the z-index yourself so it would do it for you.

.img-cover:before{     position:absolute;     z-index: 10;     top:0;left:0;right:0;bottom:0;     content:"";     box-shadow: inset 0px 0 100px #f0f;} .thumb > a:hover img {     z-index: 0;     -webkit-transform: scale(1.1); }  

Example Code

</div
 
 
0
 
vote

Когда свойство position: absolute установлено, объект выходит из потока. Вот почему выравнивание отличается и выглядит как Z-индекс изменился. Ручная настройка Z-индекс может решить эту проблему.

 

When property position: absolute is set, the object is out of the flow. This is why alignment is different and looks like z-index had changed. Manual setting z-index could solve this issue.

</div
 
 
0
 
vote

Дайте Z-index к вашему <код> .img-cover:before на <код> order3_id0 . Напишите так:

 <код> order3_id1  

Проверьте эту проверку http://jsfiddle.net/8uhnk/12/

 

Give z-index to your .img-cover:before on a:hover. Write like this:

.thumb > a:hover .img-cover:before{     z-index:2; } 

Check this http://jsfiddle.net/8uhNK/12/

</div
 
 
0
 
vote

Вы сами сказали это, «Z-индекс изменен». Так что вы должны установить <код> order3_id2 <код> order3_id3 и <код> order3_id4 . <Код> order3_id5 <кода> order3_id6 должен иметь более низкое значение, чем <код> order3_id7 <код> order3_id8 .

Пример: http://jsfiddle.net/skeurentjes/8uhnk/10/

 

You said it yourself, the "z-index is changed". So you have to set the z-index of .img-cover and .img-cover:before.The z-index of .img-cover has to have a lower value than the z-index of .img-cover:before.

example: http://jsfiddle.net/skeurentjes/8uhNK/10/

</div
 
 

Связанный проблема

0  Маржа не действует должным образом в Firefox  ( Margin not acting properly in firefox ) 
У меня очень странная проблема, что за жизнь меня я могу решить. По сути, в Safari My Top Navigation не имеет верхнего поля и является промывкам с самой верхн...

6  Как я могу найти неиспользованные CSS в AJAX приложении?  ( How can i find unused css in ajax app ) 
Я искал, и я не могу найти какие-либо дополнения или JavaScript для поиска неиспользованных CSS в приложениях AJAX. Select-Me Selectors Можете сделать са...

5  Пользовательский стиль на раскрывающемся меню React-Buttrap  ( Custom style on react bootstraps dropdown menu component ) 
Я пытаюсь применить пользовательский стиль CSS к компоненту RACH BETSTRAP, но не может понять, как получить доступ к элементам, которые не являются явными в J...

0  Невозможно переопределить CSS по умолчанию всех стилей элементов с помощью медиа-запроса  ( Cannot override default css of all elements style with media query ) 
Я пытаюсь сделать один веб-сайт отзывчив. Проблема в том, что некоторые элементы настраиваются с медиа-запросами, тогда как другие хранят свой родной стиль .....

0  Почему изображение не отображается в Div в IE8  ( Why image doesnt show up within a div in ie8 ) 
У меня есть следующие HTML: <код> <!-- default stylesheets --> <link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css"> <!-- if ie version...

1  HTML: масштабные изображения с использованием максимальной высоты / ширины  ( Html scale images using max height width ) 
У меня есть веб-страница, которая отображает кучу изображений. Я хочу убедиться, что ни одно из изображений не превышает 200 пикселей шириной и 200 пикселей п...

4  Сжимается и расти элемент, используя CSS3  ( Shrink and grow an element using css3 ) 
Я пытаюсь реализовать расти и сокращать влияние на элемент div, это работает, но анимация работает слева направо. Хотел бы сделать это из центра. Ниже я раз...

-2  Как вы можете центрировать галерею с HTML и CSS  ( How can you center a gallery with html and css ) 
Я выхожу новый HTML и CSS и надеюсь, что кто-то может помочь. с помощью W3 Schools ( http://www.w3schools.com/css/css_image_gallery. ASP ) Я создал простую ...

1  Инструмент / Утилита тоже анализируют и решают CSS современные браузерные причуды и особенности?  ( Tool utility too analyze and solve css modern browser quirks and pecularities ) 
в качестве старых браузеров, таких как IE7, проскальзывают в состояние неэлевантности я хочу сосредоточиться на поддержке современных браузеров хорошо ( IE9...

9  Могу ли я установить два фоновых изображения на одном элементе с CSS?  ( Can i set two background images on the same element with css ) 
Образец HTML-кода: <код> belongs_to :y3 Пример файла CSS: <код> belongs_to :y4 Кажется, что часть «B» игнорируется. Есть ли способ Inlclude как из...

0  Как изменить цвет фона в jQuery  ( How to change background color in jquery ) 
Я хочу исчезать цвет фона, когда фокусируется; <код> $(document).ready(function() { $('.skiplink').focusin(function(){ $('#skip...

0  Как сделать левую и правую границу карты в ионном прозрачном  ( How to make the left and right border of a card in ionic transparent ) 
Ниже приведен мой HTML. У меня в общей сложности 3 карты в трех столбцах и хотите только левую и правую сторону быть прозрачными. Я пробовал устанавливать гра...

15  CSS округлые углы  ( Css rounded corners ) 
Я видел много кодов для этого, но кажется, что он не работает очень хорошо или вообще. Я использовал картинки для округлых углов, но мне нужен код, так что он...

3  Scrolltop () не работает плавно в Chrome & Safari, но работают в Firefox  ( Scrolltop is not work smoothly in chrome safari but work in firefox ) 
Если вы проверяете эту ссылку http://jsfiddle.net/hbkdt/ . <код> $(window).scroll(function() { $(".fixed").css("top", $(window).scrollTop() + "px");...

0  всплывающее окно не назначает центр экрана  ( Popup not assign the center of the screen ) 
У меня есть код ниже, чтобы назначить всплывающую точный центр экрана. Но это не работает. Всплывающее окно появляется в разных местах, основанных на размере ...

Связанный проблема

0  Маржа не действует должным образом в Firefox 
6  Как я могу найти неиспользованные CSS в AJAX приложении? 
5  Пользовательский стиль на раскрывающемся меню React-Buttrap 
0  Невозможно переопределить CSS по умолчанию всех стилей элементов с помощью медиа-запроса 
0  Почему изображение не отображается в Div в IE8 
1  HTML: масштабные изображения с использованием максимальной высоты / ширины 
4  Сжимается и расти элемент, используя CSS3 
-2  Как вы можете центрировать галерею с HTML и CSS 
1  Инструмент / Утилита тоже анализируют и решают CSS современные браузерные причуды и особенности? 
9  Могу ли я установить два фоновых изображения на одном элементе с CSS? 
0  Как изменить цвет фона в jQuery 
0  Как сделать левую и правую границу карты в ионном прозрачном 
15  CSS округлые углы 
3  Scrolltop () не работает плавно в Chrome & Safari, но работают в Firefox 
0  всплывающее окно не назначает центр экрана