Edit in JSFiddle

.sibling {
    height: 20px;
    border: 1px solid #000;
}
.divider {
    padding: 20px;
}
.transform {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    
    transform: translate(15px, 15px);
}
.child {
    position: fixed;
    top: 30px;
    right: 10px;
    
    width: 100px;
    border: 1px solid #000;
}

.relative {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    
    position: relative;
    left: 10px;
    top: 10px;
}

<div class="sibling">transform demo</div>
<div class="transform">
    transform element
    <div class="child">fixed element</div>
</div>
<div class="sibling"></div>

<div class="divider">分隔线</div>

<div class="sibling">relative demo</div>
<div class="relative">
    relative element
    <div class="child">fixed element</div>
</div>
<div class="sibling"></div>