Question

在道歉之前，我的代码非常混乱。请允许我简单易读。基本上我想要的是，当点击4个div中的任何一个时，它会转换为全屏。然后当您再次单击它时，它会关闭/转换回原始位置。这对于div 4来说非常有效，但前3个div在CLOSING时会产生转换问题。在第一个div的情况下，当它关闭时根本没有转换。我希望这是明确的，任何帮助将不胜感激。以下是我的简化代码。

            <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                <title>layout</title>
                <style>
                html, body 
                {
                   height: 100%; 
                   padding: 0; 
                   margin: 0;
                   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                   color:black;
                   font-size:300%;

                }

                #div1 
                { 
                    background-color:red;
                    position:absolute;
                    transition:0.3s;
                    top:0;
                    left:0;
                    width: 50%;
                      height: 50%;
                }

                #div2 
                { 
                     background-color:blue;
                     position:absolute;
                     top:0;
                     right:0;
                     transition:0.3s;
                     width: 50%;
                      height: 50%;
                }

                #div3
                { 
                     background-color:green;
                     position:absolute;
                     bottom:0;
                     left:0;
                     transition:0.3s;
                     width: 50%;
                      height: 50%;
                }

                #div4 
                { 
                   background-color:yellow;
                   position:absolute;
                   bottom:0;
                   right:0;
                   transition:0.3s;
                   width: 50%;
                      height: 50%;
                }


                #div1.fullscreen
                {
                    z-index: 9999; 
                    width: 100%; 
                    height: 100%; 
                    position: fixed; 
                    top: 0; 
                    left: 0; 
                }
                 #div2.fullscreen
                {
                    z-index: 9999; 
                    width: 100%; 
                    height: 100%; 
                    position: fixed; 
                    top: 0; 
                    right: 0; 
                }
                 #div3.fullscreen
                {
                    z-index: 9999; 
                    width: 100%; 
                    height: 100%; 
                    position: fixed; 
                    bottom: 0; 
                    left: 0; 
                }
                 #div4.fullscreen
                {
                    z-index: 9999; 
                    width: 100%; 
                    height: 100%; 
                    position: fixed; 
                    bottom: 0; 
                    right: 0; 
                }

                 </style>
            </head>
            <body>

                    <div id="div1">
                        div 1
                    </div>

                    <div id="div2">
                        div 2
                    </div>

                    <div id="div3">
                       div 3
                    </div>

                    <div id="div4">
                        div 4
                    </div>



                <script>
                    $('#div1').click(function (e) {
                        $('#div1').toggleClass('fullscreen');
                    });

                    $('#div2').click(function (e) {
                        $('#div2').toggleClass('fullscreen');
                    });

                    $('#div3').click(function (e) {
                        $('#div3').toggleClass('fullscreen');
                    });

                    $('#div4').click(function (e) {
                        $('#div4').toggleClass('fullscreen');
                    });
                </script>

            </body>
            </html>

Answer 1

没有从代码预览中获取它，但让我稍微减少您的代码。那么，我们得到什么呢。您的#center容器为z-index: 15;，因此它始终超过其他div。

即使我们将其更改为z-index: 0;，我们也会遇到问题：每个div都在内联元素a内，并且因为div是绝对定位的，所以它们不会影响父a元素尺寸。每个a的大小为0px×0px，位于页面的开头。

Float参数不为absolute'定位元素提供任何内容，因为absolute从元素流中获取元素。我们该怎么做才能让它按你的意愿运作？

首先 - 让父a元素有价值：将div {}的属性更改为a {}。

第二个问题，我有一个问题，为什么我们确定div内部内容和背景大小的大小：将background-size: 100% 100%;更改为background-size: cover;以实现正确浮动a - div的元素：

div { width: 100%; height: 100%;}

因为我们没有position a属性，所以元素div将满足整页。可以将a - position属性更改为relative

a {position: relative;}

所以，现在我们有了内部跨度视图：

#center {z-index: 0}
a {z-index: 1;}

我的最后一个问题和最后一次代码更改是：您希望在最终实现中做什么？如果上面的元素不与它相交，那么#center容器悬停将起作用。如果您需要部分的元素悬停效果，则应将span放在#center容器内。

尝试描述目标，我会尽力帮助你。

$('#div1, #div2, #div3, #div4').click(function(e) {
  $(e.target).toggleClass('fullscreen');
  $(e.target).find('p').fadeToggle(200);
});

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a {
  position: relative;
  z-index: 1;
  width: 50%;
  height: 50%;
  float: left;
}
div {
  width: 100%;
  height: 100%;
}
#div1,
#div2,
#div3,
#div4 {
  background-size: 100% 100%;
  background-position: center;
  opacity: 0.7;
  transition: all .5s ease;
  position: absolute;
}
#div1 {
  background-image: url("1.jpg");
}
#div2 {
  background-image: url("2.jpg");
}
#div3 {
  background-image: url("3.jpg");
}
#div4 {
  background-image: url("4.jpg");
}
#div1:hover,
#div2:hover,
#div3:hover,
#div4:hover {
  opacity: 1.0;
  background-size: 120% 120%;
}
.fullscreen {
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#center {
  position: absolute;
  width: 600px;
  height: 300px;
  z-index: 0;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -300px;
  background: #706d6d;
  transition: 0.3s;
}
#center:hover {
  background: #232222;
}
#home {
  width: 80%;
  height: 80%;
  color: white;
  margin-left: 10%;
  text-align: justify;
  margin-top: 5%;
  border-bottom: 3px solid white;
  border-top: 3px solid white;
}
.words {
  width: 100%;
  margin-top: 25vh;
  text-align: center;
  color: white;
  font-size: 300%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#">
  <div id="div1">

    <div class="words">
      <span> section 1</span>
      <p id="p1" style="display:none;font-size:50%">Lorem Ipsum is simply dummy text of the printing and
        <br/>typesetting industry. Lorem Ipsum has been the industry's standard dummy
        <br/>text ever since the 1500s, when an unknown printer took</p>
    </div>

  </div>
</a>
<a href="#">
  <div id="div2">
    <div class="words">
      <span> section 2</span>
      <p id="p2" style="display:none;font-size:50%">Lorem Ipsum is simply dummy text of the printing and
        <br />typesetting industry. Lorem Ipsum has been the industry's standard dummy
        <br />text ever since the 1500s, when an unknown printer took</p>
    </div>
  </div>
</a>
<a href="#">
  <div id="div3">
    <div class="words">
      <span> section 3</span>
      <p id="p3" style="display:none;font-size:50%">Lorem Ipsum is simply dummy text of the printing and
        <br />typesetting industry. Lorem Ipsum has been the industry's standard dummy
        <br />text ever since the 1500s, when an unknown printer took</p>
    </div>
  </div>
</a>
<a href="#">
  <div id="div4">
    <div class="words">
      <span> section 4</span>
      <p id="p4" style="display:none;font-size:50%">Lorem Ipsum is simply dummy text of the printing and
        <br />typesetting industry. Lorem Ipsum has been the industry's standard dummy
        <br />text ever since the 1500s, when an unknown printer took</p>
    </div>
  </div>
</a>
<div id="center">
  <div id="home">
    <h3 style="text-align:center">HOME</h3>
    <label>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum</label>
  </div>
</div>

我如何给div等位置权力

1 个答案: