Javascript 如何将各种z索引div类集中化？_Javascript_Jquery_Css_Html

Javascript 如何将各种z索引div类集中化？

javascript jquery css html

Javascript 如何将各种z索引div类集中化？,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我得到的页面是这样的：我想把它集中起来，但我做不到。问题是：我想给black div一整页我想集中其他两个div，而不使用css中的left属性在悬停时，z的值应该增加任意值，这样整个div都可以出现我学习了保证金：0自动o自动；属性，该属性使元素相对于页面集中。我想用边距属性w.r.t.黑除法得到黄色和绿色除法的相同结果。我可以使用CSS获得这些结果，还是必须使用Javascript等？我的html代码如下： <!DOCTYPE html> <html&g

我得到的页面是这样的：

我想把它集中起来，但我做不到。问题是：

我想给black div一整页

我想集中其他两个div，而不使用css中的left属性

在悬停时，z的值应该增加任意值，这样整个div都可以出现

我学习了保证金：0自动o自动；属性，该属性使元素相对于页面集中。我想用边距属性w.r.t.黑除法得到黄色和绿色除法的相同结果。我可以使用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>

我为我的英语道歉。希望你能理解我的问题。

我仍然相信使用
左
是解决你问题的最好方法-不知道OP为什么要避免它。

以下是概念验证提琴：

相反，请使用以下技巧：将它们的位置从左侧设置为容器/父容器宽度的50%。对了一半。但是，我们还需要考虑元素本身的宽度，这意味着我们必须向后偏移元素自身宽度的一半

使用以下命令：

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

您还必须对HTML代码进行一些更改：

我建议将所有内容包装在相对定位的父容器周围，而不是使用边距从顶部偏移第二个和第三个div，而是使用
```
top
```
删除
。将布局委托给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>

查看fiddle at:

为什么你不把这些div嵌套在一起，就像我不知道一样，先生。你能告诉我怎么做吗？我已经提供了一个fiddle和我的评论。看一看。它在任何地方都不使用“left”属性是的，先生。我需要使用position属性。为什么不使用

left

？如果您知道正确的技术，我认为使用它不会有任何问题。在第节中，您将位置的值指定为相对，将其他值指定为绝对。这意味着什么？我告诉您，

中所有绝对定位的元素都应该相对于其父元素。这就是全部。如果您不声明，它将相对定位在紧密定位的元素上，即

（在您的示例中可能可以，但在布局更改时不是将来的证明）。我认为这里的父项是节？先生，您已经使用了左属性两次。仅使用一次是不够的..第二，.第三次{左：50%；变换：translateX（-50%）；第二个{宽度：400px；位置：绝对；高度：200px；背景色：绿色；顶部：50px；左：50%；z索引：1；}不，后面的

left:50%

是多余的…样式表是层叠的，所以它无论如何都会覆盖，没有必要声明两次。我只是决定将

left

和

transform

声明合并到第二和第三个div中。更新了答案。

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

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;
}