棘手的div重叠

Question

我试图在这种情况下使用z-index重叠，但我无法达到我想要的结果。

以下是我的代码：https://jsfiddle.net/mx0zdpvm/。

body{
    margin: 0;
    background-color: #ffffff;
}
#designWrapper{
    width: 60vw;
    height: 100%;
    float: right;
}
#redStripes{
    position: static;
}
#triangle{
    position: static;
    border-bottom: 25vw solid #ceecec;
    border-left: 17.5vw solid #ffffff;
}
.redStripe{
    margin-bottom: 10px;
    background-color: #e83c3c;
    transform: rotate(25deg);
    width: 200vw;
    height: 35px;
    position: relative;
    left: -100px;
}

<div id="designWrapper">
    <div id="design">
        <div id="redStripes">
            <div class="redStripeWrapper" id="redStripeWrapper1">
                <div class="redStripe" id="red1">
                    red1
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper2">
                <div class="redStripe" id="red2">
                    red2
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper3">
                <div class="redStripe" id="red3">
                    red3
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper4">
                <div class="redStripe" id="red4">
                    red4
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper5">
                <div class="redStripe" id="red5">
                    red5
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper6">
                <div class="redStripe" id="red6">
                    red6
                </div>
            </div>
        </div>
        <div id="triangleWrapper">
            <div id="triangle">
            </div>
        </div>
    </div>
</div>

这是我想要实现的结果：

首选CSS解决方案。

Answer 1

首先改变：

#redStripes{
    position: relative;
    top:60px;
    right:280px;
    z-index: 2;
}

如果你想重叠元素，div，你需要指定位置的绝对位置或相对位置，否则z-index将不起作用。

https://jsfiddle.net/scorpio777/mx0zdpvm/3/

body{
    margin: 0;
    background-color: #ffffff;
}
#designWrapper{
    width: 60vw;
    height: 100%;
    float: right;
}
#redStripes{
    position: relative;
    top:50px;
    right:280px;
    z-index: 2;
}
#triangle{
    position: static;
    border-bottom: 25vw solid #ceecec;
    border-left: 17.5vw solid #ffffff;
}
.redStripe{
    margin-bottom: 10px;
    background-color: #e83c3c;
    transform: rotate(25deg);
    width: 200vw;
    height: 35px;
    position: relative;
    left: -150px;
}

<div id="designWrapper">
    <div id="design">
        <div id="redStripes">
            <div class="redStripeWrapper" id="redStripeWrapper1">
                <div class="redStripe" id="red1">
                    red1
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper2">
                <div class="redStripe" id="red2">
                    red2
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper3">
                <div class="redStripe" id="red3">
                    red3
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper4">
                <div class="redStripe" id="red4">
                    red4
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper5">
                <div class="redStripe" id="red5">
                    red5
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper6">
                <div class="redStripe" id="red6">
                    red6
                </div>
            </div>
        </div>
        <div id="triangleWrapper">
            <div id="triangle">
            </div>
        </div>
    </div>
</div>

Answer 2

这将重叠排序。我将位置设置为relative，将z-index设置为蓝色三角形，将2设置为红色条带，然后使用top和right调整位置。我会让你去理清其余部分：）

body{
    margin: 0;
    background-color: #ffffff;
}
#designWrapper{
    width: 60vw;
    height: 100%;
    float: right;
}
#redStripes{
    position: static;
}
#triangle{
    position: relative;
    border-bottom: 25vw solid #ceecec;
    border-left: 17.5vw solid #ffffff;
    right: 0px;
    top:-100px;
    z-index:1;
}
.redStripe{
    margin-bottom: 10px;
    background-color: #e83c3c;
    transform: rotate(25deg);
    width: 200vw;
    height: 35px;
    position: relative;
    z-index:2;
    left: -100px;
}

Answer 3

如果您未将//: Fully-Implemented Inheritance class FullSuper: Codable { var id: UUID? init() {} private enum CodingKeys: String, CodingKey { case id } required init(from decoder: Decoder) throws { let container = try decoder.container(keyedBy: CodingKeys.self) id = try container.decode(UUID.self, forKey: .id) } func encode(to encoder: Encoder) throws { var container = encoder.container(keyedBy: CodingKeys.self) try container.encode(id, forKey: .id) } } class FullSub: FullSuper { var string: String? private enum CodingKeys: String, CodingKey { case string } override init() { super.init() } required init(from decoder: Decoder) throws { let container = try decoder.container(keyedBy: CodingKeys.self) let superdecoder = try container.superDecoder() try super.init(from: superdecoder) string = try container.decode(String.self, forKey: .string) } override func encode(to encoder: Encoder) throws { var container = encoder.container(keyedBy: CodingKeys.self) try container.encode(string, forKey: .string) let superencoder = container.superEncoder() try super.encode(to: superencoder) } } let fullSub = FullSub() fullSub.id = UUID() fullSub.string = "FullSub" let fullEncoder = PropertyListEncoder() let fullData = try fullEncoder.encode(fullSub) let fullDecoder = PropertyListDecoder() let fullSubDecoded: FullSub = try fullDecoder.decode(FullSub.self, from: fullData) 设置为fullSubDecoded或position，则无法重叠元素。