javascript – 如何集中各种z-indexed div类？

2019年8月4日 176次阅读

我得到的页面是这样的：.

我想让它集中化,但我不能那样做.
问题是：

>我想给黑色div整页.
>我想集中其他两个div而不使用css中的left属性.
>当悬停z的值时,应该增加任何值,以便整个div可以出现.

我了解了保证金：0 auto auto;它相对于页面集中元素的属性.
我想使用margin属性w.r.t获得相同的黄色和绿色div.黑色的div.
我可以使用CSS获得这些结果,或者我将不得不使用Javascript等？
我的HTML代码在这里：

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styling.css"/>

    </head>
    <body>
        <div class="first">
            <center> <a href="http://www.google.com">The first link </a></center>
        </div>

        <div class="second">
            <center> <a href="http://www.fb.com"> The second link </a></center>
        </div>

        <div class="third">
            <center> <a href="http://www.yahoo.com"> The third link </a></center>
        </div>      
    </body>
<html>

我的css文件是： –

.first
{
    position: absolute;
    width:500px;
    color:#fff;
    height:200px;
    background-color:#000;
    z-index: 0;

    margin:0 auto 0 auto;
}

.second
{
    width:400px;
    position: absolute;
    height:200px;
    background-color: green;
    left:60px;
    z-index: 1;
    margin:50px auto 0 auto;

 }
 .third
 {
    position: absolute;
    width:300px;
    height: 200px;
    left:100px;
    background-color:yellow;
    z-index: 2;

        margin:100px auto 0 auto;
}

body div:first-child a:hover
{
    font-size:30px;
    color:yellow;
    z-index:5;
}
body  div +div a:hover
{
    font-size:40px;
    color:red;
    z-index: 5;
}
body div+div+div  a:hover
{
    font-size:50px;
    color:#fff;
    z-index:5;
}

我为我的英语道歉.希望你能解决我的问题.

最佳答案 我仍然认为使用left是解决问题的最佳方法 – 不确定为什么OP想要避免它.

这是概念证明小提琴：http://jsfiddle.net/teddyrised/YqDL5/

相反,请使用以下技巧：将容器的位置设置为容器/父级宽度的50％.这是正确的一半.但是,我们还需要考虑元素本身的宽度,这意味着我们必须将其向后偏移其自身宽度的一半.

用这个：

.second, .third {
    left: 50%;
    transform: translateX(-50%);
}

您还需要对HTML代码进行一些更改：

>我建议将所有内容包装在相对定位的父容器周围,而不是使用边距从顶部偏移第二个和第三个div,而是使用top.
>删除< center>.将布局委托给CSS,并且很久以前就弃用了这个HTML标记.

这是修改后的HTML：

<section>
    <div class="first"><a href="http://www.google.com">The first link </a></div>
    <div class="second"><a href="http://www.fb.com"> The second link </a></div>
    <div class="third"><a href="http://www.yahoo.com"> The third link </a></div>     
</section>

另外,我建议将第一个div设置为相对定位,这样就不会导致父元素的高度崩溃.否则,您必须设置显式高度,因为绝对定位会将元素从流中取出,并且父级在计算自己的维度时不会将其考虑在内.

section {
    position: relative;
}
.first {
    width:100%;
    color:#fff;
    height:200px;
    background-color:#000;
}
.second, .third {
    left: 50%;
    transform: translateX(-50%);
}
.second
{
    width:400px;
    position: absolute;
    height:200px;
    background-color: green;
    top: 50px;
    z-index: 1;
 }
 .third {
    position: absolute;
    width:300px;
    height: 200px;
    top: 100px;
    background-color:yellow;
    z-index: 2;
}

见小提琴：http://jsfiddle.net/teddyrised/YqDL5/

点赞