div overflow and z-index

Please have a look at the following fiddle:

.row {
    height: 25px;
     width: 300px;
     background-color: red;
     overflow: visible;
     border: 1px solid black;
     position: absolute;
}
 .modal {
    width: 200px;
     height: 100px;
     background-color: yellow;
     z-index: 10;
     position: absolute;
     left: 3px;
     top: 3px;
}

<html>

<head>

</head>

<body>
    <div class="row" style="transform: translateY(0px);">
        Content
        <div class="modal"></div>
    </div>
    <div class="row" style="transform: translateY(25px);">
        Content
    </div>
</body>

</html>

The second div row overlaps the yellow "modal popup" I created in the first row. I am trying to let the yellow box overlap the second row. How can I archive that? My prerequisites are, that I have a bunch of rows, but in some of them I want to display a small popup window, that contains information. This information should not be overlapped by subsequent rows.

This is only a very basic example to show my core problem. Any ideas?

Update:

I updated my fiddle:

https://jsfiddle.net/y7w705wb/20/

The reason why I ask this question is, because I am using ag-grid as datatable in my app and want to display a modal inside one of the cells. I cannot change the cell structure, so I really have to do it like in my fiddle example.

Solution

Remove z-index: 1 from the .row class. It should work Fine.