Position absolute within an overflow hidden

Question

Position absolute within an overflow hidden

Navigation

#1 by (0 votes)
#2 by (-1 votes)

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, I would like to make the prisoner visible (when it goes beyond the bounds of the div box) even though it is inside a hidden overflow?

html css

asked by anonymous 22.02.2018 / 19:00

2 answers

-1

If it is in the center that you want, this can be done using the position absolute.

<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>

23.02.2018 / 06:17

Merge results from several procedures into a single table How to maintain the connection between Android client Java server?

score 0 · Accepted Answer

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

Overflow The overflow property specifies whether or not a content container is clipped when it overflows the element box.

hidden - The content is clipped and no scrollbars are provided.

In other words, anything that goes beyond the limit of the box will be clipped

link

I even did a test by putting a Pseudo Element in the Box itself and even then it was clippado

EDIT: You can remove overflow: hidden; in 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>