Здравствуйте, мне нужно было обойти overflow:hidden и для этого я использовал position:fixed;
Но чтоб использовать относительное позиционирование я использою нулевой высоты и ширины wrapper
но можно ли обойтись без wrapper;
https://jsfiddle.net/unknowne/z3hv2m6r/1/
<body>
<div class="container">
<div class="wrapper">
<div class="content">some very important text here
</div>
</div>
</div>
</body>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
.container {
overflow: hidden;
background: blue;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.wrapper {
position: absolute;
width: 0;
height: 0;
}
.content {
display: none;
position: fixed;
transform: translate(-50%, 0);
background-color: green;
width: max-content;
}
.container:hover .content {
display: block;
}
</style>
Простой
