Я делаю сайт с множеством абсолютно позиционированных элементов. Я их содержал в «обложке страницы», которая сосредоточена на странице. Он относительно расположен так, что содержащиеся элементы расположены относительно него. Некоторые элементы на странице являются привязками к другим страницам и на: hover, эти элементы переходят в другое состояние, из-за чего они выглядят снятыми со страницы с использованием масштабного преобразования и увеличенной тени окна.Проблема с абсолютно позиционированными элементами и переходами CSS
Однако, когда я нависаю над одним из таких элементов, все те, которые следуют за ним в разметке, обнаруживают странное поведение, такое как слегка смещающееся положение во время перехода. Эта проблема не возникает, если они не содержатся в обертке страницы или если обход страницы больше не установлен как относительно позиционированный (в основном это одно и то же с точки зрения макета в этом случае).
Мне кажется, что тот факт, что обертка страниц центрирует эти элементы, а затем они лежат относительно нее, как-то влияет на рендеринг переходов, но я полностью застрял. Я пробовал все, что мог придумать, и теперь обращаюсь за помощью. Также я должен сказать, что я тестировал это только в браузерах Webkit, поэтому проблема может не возникать в других браузерах.
Вот некоторые урезанная код:
HTML:
<body>
<div id="page-wrap">
<a class="card" href="text.html"><div class="vert"><div class="card-content">
Here is<br/>some text
</div></div></a>
<a class="card" href="somemore.html"><div class="vert"><div class="card-content">
Here is<br/>some more text
</div></div></a>
<a class="card" href="evenmore.html"><div class="vert"><div class="card-content">
Here is<br/>even more text
</div></div></a>
</div>
</body>
CSS:
body {
background: hsl(60, 80%, 90%);
}
#page-wrap {
margin: 0 auto;
position: relative;
width: 800px;
}
.card {
background: hsl(80, 0%, 97%);
box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
display: table;
height: 150px;
margin: 0px;
position: absolute;
width: 300px;
-webkit-transition: all 0.2s linear;
}
.vert {
display: table-cell;
margin 0px;
padding: 0px;
vertical-align: middle;
width: 100%;
}
.card-content {
font: 40px 'Annie Use Your Telescope', cursive;
margin: 0px;
text-align: center;
width: 100%;
}
a.card {
background: hsl(120, 90%, 35%);
color: hsl(60, 80%, 90%);
text-decoration: none;
text-shadow: -2px 2px hsl(60, 80%, 35%);
z-index: 3;
}
a:hover {
box-shadow: 0 0 40px 15px hsla(0,0%,0%,.3);
-webkit-transform: scale(1.2);
}
Ты спасатель жизни. Спасибо, что нашли это. Я везде искал решение. – SethGunnells