html – 在另一个div下面堆叠div的一角
发布时间:2020-12-14 16:45:03 所属栏目:资源 来源:网络整理
导读:我试图把蓝色方格div的角落放在橙色div下面.我尝试了我所知道的一切: z-index不起作用,因为我的div被包裹在另一个div中,如果我打开它,我将在定位八个元素时遇到麻烦. 谁能告诉我怎么做?或者如何对所有元素使用z-index? 是)我有的: 我需要的: 到目前为止
我试图把蓝色方格div的角落放在橙色div下面.我尝试了我所知道的一切:
z-index不起作用,因为我的div被包裹在另一个div中,如果我打开它,我将在定位八个元素时遇到麻烦. 谁能告诉我怎么做?或者如何对所有元素使用z-index? 是)我有的: 我需要的: 到目前为止我的HTML: body { background-color: #222; background-repeat: no-repeat; } #blueSquare { position: absolute; left: 15px; top: 15px; width: 50%; height: 170px; -webkit-transform: rotate(-45deg); } #rightTopblueSquare { height: 100%; width: 50%; position: relative; left: 50%; background-color: #7ab9c2; opacity: .99; } #leftBottomblueSquare { position: relative; top: -100%; height: 100%; width: 50%; background-color: #6baaae; } /*----------------------------------*/ #greySquare { width: 50%; height: 170px; position: absolute; bottom: 15px; left: 15px; -webkit-transform: rotate(45deg); } #lefTopgreySquare { height: 100%; width: 50%; position: relative; left: 50%; background-color: #656f78; } #rightButtomgreySquare { position: relative; top: -100%; height: 100%; width: 50%; background-color: #313439; } /*----------------------------------*/ #redSquare { width: 50%; height: 170px; position: absolute; right: 15px; bottom: 15px; -webkit-transform: rotate(-45deg); } #leftBottomredSquare { height: 100%; width: 50%; position: relative; left: 50%; background-color: #a2191d; } #rightTopredSquare { position: relative; top: -100%; height: 100%; width: 50%; background-color: #d63030; } /*----------------------------------*/ #orangeSquare { width: 50%; height: 170px; position: absolute; right: 15px; top: 15px; -webkit-transform: rotate(45deg); z-index: -1; } #rightBottomorangeSquare { height: 100%; width: 50%; position: relative; left: 50%; background-color: #f42b06; } #lefttToporangeSquare { position: relative; top: -100%; height: 100%; width: 50%; background-color: #ff6a05; opacity: 1; } <div id="orangeSquare"> <div id="rightBottomorangeSquare"></div> <div id="lefttToporangeSquare"></div> </div> <div id="redSquare"> <div id="leftBottomredSquare"></div> <div id="rightTopredSquare"></div> </div> <div id="greySquare"> <div id="lefTopgreySquare">leftTop</div> <div id="rightButtomgreySquare">rightBottom grey sqr</div> </div> <div id="blueSquare"> <div id="rightTopblueSquare">rightTop</div> <div id="leftBottomblueSquare">LeftBotom blue sqr</div> </div> 解决方法
这可以使用CSS 3D变换来完成.首先,创建一个外部容器并将HTML包装在其中:
#outer { position: relative; width: 500px; height: 400px; perspective: 1000px; transform-style: preserve-3d; } 外部容器具有较大的透视值,以防止元素在旋转时看起来不同.它使用transform-style:preserve-3d;覆盖默认堆叠引擎并将所有内容堆叠在3D上下文中.这可确保所有内容都正确堆叠. 然后,为了使元素正确重叠,只需在Y轴周围给每个元素一个5度的小扭曲: transform: ... rotateY(5deg); 你的替代元素会产生相反的变化: transform: ... rotateY(-5deg); 结果是一个在3d中有意义的场景,并且它完全堆叠在物理世界中. 工作,现场的例子: body { background-color: #222; background-repeat: no-repeat; } #blueSquare { position: absolute; left: 15px; top: 15px; width: 50%; height: 170px; -webkit-transform: rotateZ(-45deg) rotateY(5deg) ; transform: rotateZ(-45deg) rotateY(5deg) ; } #rightTopblueSquare { height: 100%; width: 50%; position: relative; left: 50%; background-color: #7ab9c2; } #leftBottomblueSquare { position: relative; top: -100%; height: 100%; width: 50%; background-color: #6baaae; } /*----------------------------------*/ #greySquare { width: 50%; height: 170px; position: absolute; bottom: 15px; left: 15px; -webkit-transform:rotateZ(45deg) rotateY(-5deg) ; transform:rotateZ(45deg) rotateY(-5deg) ; } #lefTopgreySquare { height: 100%; width: 50%; position: relative; left: 50%; background-color: #656f78; } #rightButtomgreySquare { position: relative; top: -100%; height: 100%; width: 50%; background-color: #313439; } /*----------------------------------*/ #redSquare { width: 50%; height: 170px; position: absolute; right: 15px; bottom: 15px; -webkit-transform: rotateZ(-45deg) rotateY(-5deg); transform: rotateZ(-45deg) rotateY(-5deg); } #leftBottomredSquare { height: 100%; width: 50%; position: relative; left: 50%; background-color: #a2191d; } #rightTopredSquare { position: relative; top: -100%; height: 100%; width: 50%; background-color: #d63030; } /*----------------------------------*/ #orangeSquare { width: 50%; height: 170px; position: absolute; right: 15px; top: 15px; -webkit-transform: rotateZ(45deg) rotateY(5deg); transform: rotateZ(45deg) rotateY(5deg); } #rightBottomorangeSquare { height: 100%; width: 50%; position: relative; left: 50%; background-color: #f42b06; } #lefttToporangeSquare { position: relative; top: -100%; height: 100%; width: 50%; background-color: #ff6a05; } #outer { position: relative; width: 500px; height: 400px; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } <div id="outer"> <div id="orangeSquare"> <div id="rightBottomorangeSquare"></div> <div id="lefttToporangeSquare"></div> </div> <div id="redSquare"> <div id="leftBottomredSquare"></div> <div id="rightTopredSquare"></div> </div> <div id="greySquare"> <div id="lefTopgreySquare">leftTop</div> <div id="rightButtomgreySquare">rightBottom grey sqr</div> </div> <div id="blueSquare"> <div id="rightTopblueSquare">rightTop</div> <div id="leftBottomblueSquare">LeftBotom blue sqr</div> </div> </div> JSFiddle版本:https://jsfiddle.net/jjurL6j8/1/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |