Position Absolute within a Hidden overflow

Asked

Viewed 1,766 times

1

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="box">
  <div class="prisoner">o</div>
</div>
</body>
</html>

CSS:

.box {
  width: 200px;
  height: 100px;
  background-color: #ccc; 
  position: relative;
  overflow: hidden;
}

.prisoner {
    width: 10px;
    height: 10px;
    background-color: #fa0;
    position: absolute;
    top: -10px;
}

In this case, it would be possible to make the Prisoner visible (when exceeding the limits of the div box), even if it is inside an overflow Hidden?

html css

  • Related: https://answall.com/q/268987/8063

2 answers

0


Unfortunately there is no way. You can check directly in the W3C documentation

Overflow The overflow Property specifies whether content of a block container element is clipped when it overflows the element’s box box.

  • Hidden - The content is clipped and no scrollbars are provided.

In other words, anything that exceeds the box box will be clipped (severed)

https://www.w3.org/wiki/CSS/Properties/overflow

I even ran a test by putting a Pseudo Element in the Box itself and yet it went clipped

EDIT: You can remove the overflow: hidden; at the event :hover for example

Test with ::after and :hover

body {
    margin-top: 30px;
}
  .box {
  width: 200px;
  height: 100px;
  background-color: #ccc; 
  position: relative;
  overflow: hidden;
}
.box:hover {
  overflow: visible;
}
.box::after {
    content: "o";
    width: 30px;
    height: 30px;
    background-color: #fa0;
    position: absolute;
    top: -15px;
    font-size: 30px;
    z-index: 1000;
}
<div class="box">
  <div class="prisoner">o</div>
</div>

-1

if it’s in the center you want, it can be like this, using the Absolute position.

<style>
    #fora{
        width: 500;
        height: 500;
        background-color: #34495e;
        position: relative;
    }

    #dentro{
        width: 50;
        height: 50;
        background-color: #e74c3c;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>

<div id="fora">
    <div id="dentro">

    </div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.