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