Можно как-то задать элементу, что бы он не влиял на поток документа?

Question

[KononovD]

Здравсвтвуйте!

Есть вот такая иерархия карточки товара:
article>a>img+h2+btn+ect.
Можно ли задать для<a> какое-то св-во, что бы наличие этого <a> браузер игнорировал?

что-то похожее на pointer-events: none;
только для html элемента.

Проблема в том, что article спозиционирован абсолютно, что бы при наведении на него он увеличивался в размере и не толкал соседние товары. А из-за того, что между articl'ом появился еще и <a> - поехала верстка. <a> не хочет растягиваться на всю высоту articl'a

Comments

[Rustam Bainazarov]

Угадываю проблемы без кода. Отвечаю тоже без кода.

[KononovD]

Рустам Байназаров, хотите посмотреть на 400 строк jsx разметки и 500 строк styl?

[Rustam Bainazarov]

KononovD, это, по-вашему, много?

[KononovD]

Рустам Байназаров, вопрос не в том, что это много или мало, а в том, что это не целесообразно

Могу предложить такую штуку

.catalog__list - грид
.catalog__product - имеет явную высоту и relative
.product-card - absolute, что бы когда контент внутри него увеличивался - он наезжал на нижние элементы.

у .product-card__price margin-top:auto;
но из-за того, что <a> не занимает высоту родителя (article) - price не прижат к низу

[KononovD]

Рустам Байназаров, да, я знаю, что в <a> нельзя вкладывать другие интерактивные элементы, но тут такое тз

можно решить мою проблему избавившись от лишних оберток. проще всего будет убрать article и вместо него родителем будет ссылка, но мне кажется, это не совсем правильно.

можно убрать li и тогда article сделать relative и все заработает

[Rustam Bainazarov]

KononovD, нет, спасибо, мне картинки не нужны, удачи с решением вопроса.

[KononovD]

Рустам Байназаров, спасибо. я все же избавился от лишней обертки: ul > div; li > null.
и все заработало

Answer 1

[inkShio]

< a > не хочет растягиваться на всю ширину articl'a

так растяни < a >

a {
display:block;
width:100%;
height:100%;
}

если у тебя article - position: absolute, или relative
можно так

a {
display: block;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
}