如何让图片覆盖父div的偏移虚线outline？

要让图片覆盖div的虚线outline，只需给图片的父元素（.titlebar）添加相对定位和z-index属性，提升它的堆叠层级即可：

修改后的CSS代码 #

:root {
    --background: #9376e0;
    --main: #f6ffa6;
    --accent: #e892cf;
}

body {
    background-color: var(--background);
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.contentbox {
    margin: 0 2rem;
    background-color: var(--main);

    box-shadow: 15px 15px var(--accent);
    border: 4px solid var(--accent);
    border-radius: 10px;
    border-top: 50px solid var(--accent);

    outline: 2px dashed var(--accent);
    outline-offset: -10px;

    padding: 20px 10px 15px 20px;
}

.titlebar {
    margin: -90px -300px 30px -10px;
    min-width: 100%;
    /* 添加以下两行 */
    position: relative;
    z-index: 1;
}

.titlebar, .titlebar img {
    max-width: 100%;
}

原理说明 #

• outline是绘制在元素自身的轮廓层，属于元素的一部分，默认会显示在内部子元素上方。
• position: relative会让元素创建独立的堆叠上下文，配合z-index: 1能让该元素及其子元素的堆叠层级高于父元素的outline，从而实现图片覆盖outline的效果。

内容的提问来源于stack exchange，提问作者alex