Place div at top screen relative to document - html

Question

I have an construction and I can't change a couple of elements.
The meaning is that the modal comes at the top, without changing the location of the div. (Or at least not above box3)
The elements I can change are box3, box4 and modal.
I want the yellow square to overlap over the whole document, now it is stuck in its parent (See snippet or jsFiddle)
Is there any way to do this?
CSS & HTML:
.modal {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background-color: yellow;
}
.box4 {
display: block;
height: 150px;
}
.box3 {
display: block;
position: relative;
margin: 0 auto;
padding-right: 18px;
padding-left: 18px;
clear: both;
border: 2px solid purple;
height: 150px;
}
.box2 {
border: 2px solid green;
padding-right: 10px;
padding-left: 10px;
width: 100%;
position: relative;
float: left;
display: block;
box-sizing: border-box;
min-height: 200px;
}
.upperRow {
display: block;
box-sizing: border-box;
height: 20px;
}
.box1 {
position: relative;
width: 100%;
height: 100%;
background: #fff;
-webkit-transform-style: preserve-3d;
z-index: 2;
border: 2px solid black;
}
header {
position: relative;
background-color: red;
height: 50px;
display: block;
box-sizing: border-box;
}
footer {
height: 50px;
padding-top: 8px;
margin-top: 8px;
float: left;
width: 100%;
background-color: blue;
display: block;
}
<!-- HTML -->
<header>
</header>
<div class="box1">
<section class="upperRow">
</section>
<section class="box2">
<div class="box3">
<!-- box3 CAN BE MODIFIED-->
<div class="box4">
<!-- box4 CAN BE MODIFIED-->
</div>
<div class="modal">
<!-- modal CAN BE MODIFIED-->
</div>
</div>
</section>
</div>
<footer>
</footer>

Answer 1

It's cause the parents have position: relative; or -webkit-transform-style: preserve-3d;. If you remove that, it's fine.
.modal {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background-color: yellow;
}
.box4 {
display: block;
height: 150px;
}
.box3 {
display: block;
margin: 0 auto;
padding-right: 18px;
padding-left: 18px;
clear: both;
border: 2px solid purple;
height: 150px;
}
.box2 {
border: 2px solid green;
padding-right: 10px;
padding-left: 10px;
width: 100%;
float: left;
display: block;
box-sizing: border-box;
min-height: 200px;
}
.upperRow {
display: block;
box-sizing: border-box;
height: 20px;
}
.box1 {
width: 100%;
height: 100%;
background: #fff;
z-index: 2;
border: 2px solid black;
}
header {
position: relative;
background-color: red;
height: 50px;
display: block;
box-sizing: border-box;
}
footer {
height: 50px;
padding-top: 8px;
margin-top: 8px;
float: left;
width: 100%;
background-color: blue;
display: block;
}
<!-- HTML -->
<header>
</header>
<div class="box1">
<section class="upperRow">
</section>
<section class="box2">
<div class="box3">
<!-- box3 CAN BE MODIFIED-->
<div class="box4">
<!-- box4 CAN BE MODIFIED-->
</div>
<div class="modal">
<!-- modal CAN BE MODIFIED-->
</div>
</div>
</section>
</div>
<footer>
</footer>