Мой вопрос может быть особой проблемой в этом случае, из-за которой я сожалею, но я прочитал "http://book.mixu.net/css/5-tricks.html#css-layout-tricks-and-techniques-used-for-positioning" всю эту статью и другие учебные пособия по макету и не нашел подход к моей проблеме. У меня есть коллекция с изображением внутри и текстом, который я использую (onmouseenter onmouse), оставьте, чтобы показать тег ap с текстом, который добавлен в конец карты.
Теперь, когда я открываю раскрывающийся список, я хочу, чтобы он отображался поверх другой карточки, которую я читал об использовании позиций относительно родителя и абсолюта для ребенка и использования полей, но когда я пытаюсь настроить карточки, они оказываются сверху друг от друга, и только один показан.
Я не могу добавить изображение к вопросу, потому что у меня нет 10 репутации, я могу опубликовать ссылку "https://i.ibb.co/1s5Mf85/Screenshot-from-2019-05-04-07-35-585.png".
Это HTML-структура, которую я использую.
render() {
const { id, brand, model, imgUrl } = this.props;
const { shouldShowDescription } = this.state;
return (
<Card tabIndex="1" className={shouldShowDescription ? style.cardOn : style.cardOff} onMouseEnter={this.toggleDescriptionVisibility} onMouseLeave={this.toggleDescriptionVisibility}>
<CardImg variant="top" src={imgUrl} />
<CardBody className={style.cardText}>
<CardTitle>{brand}{model}</CardTitle>
<div className={shouldShowDescription ? style.fadeIn : style.fadeOut}>
<p>
* bar<br />
* foo <br />
* foo <br />
* foo <br />
* foo <br />
</p>
</div>
</CardBody>
</Card>
);
}
и это стили, которые у меня есть для карточек.
.cardOff {
border: 0;
width: 13rem;
display: inline-block;
opacity: 0.99;
}
.cardOn {
border: 3px solid #f5f5f5;
width: 13rem;
display: inline-block;
opacity: 0.99;
}
Если кто-то может показать мне, как этого можно достичь, или дать мне ресурс для изучения. Заранее спасибо.