个人中心
gpt4 book ai didi

jquery - 如何使元素对绝对定位的元素使用react，就好像它不是绝对定位的一样

转载 作者：行者123 更新时间：2023-11-28 04:15:26 25 4
gpt4 key购买 nike

基本上我的问题是我做了一个绝对定位的标题图像，但结果下面的 div 忽略了它的存在，这会产生不需要的重叠(所有文本都漂浮在灰色图像上)。就让绝对定位的 div 下面的 div 表现得好像绝对定位的 div 只是流中的正常 div 而言，最明智的选择是什么？谢谢你的帮助。

https://jsfiddle.net/w6rrLkpu/

相关的 HTML(两个 DIVS)

<body>

<!-- Start Nav -->

<div class="container-fluid" style="padding:0px;">

  <nav class="navbar navbar-inverse" style="border-radius: 0%; margin: 0px">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <img src="img/brand.jpg" class="navbar-brand" alt="" id="navbar-brand" >

      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-right">
          <li style="padding-top: 12px; padding-bottom: 12px;" class="active"><a href="#">Home</a></li>
          <li style="padding-top: 13px; padding-bottom: 13px;"><a href="#">How It Works</a></li>
          <li style="padding-top: 13px; padding-bottom: 13px;"><a href="#">Get Started</a></li>
          <li style="border:none; padding-bottom: 3px;"><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<!-- End Nav -->

<!-- Start Slider -->


<div class="container-fluid" style="padding: 0px; " >

 <div class="video_holder">
        <video autoplay loop width="100%">
            <source src="img/woman.mp4" type="video/mp4">

        </video>
    </div>
    <img src="img/taxes1.jpg" alt="fail" id="link"> 

            <h1 class="new"> Let's Begin </h1>
         <a href="#Get" class="phalse"><i class="fa fa-arrow-down fa-3x" aria-hidden="true"></i></a>


</div>

<!-- End Slider -->

<!-- Start About -->

<div style="padding-top: 7%; padding-bottom: 8%;" class="container-fluid " id="About">
    <div class="row">
        <div class="text-center col-sm-12 col-lg-12">
            <h1 style="padding-bottom: 2%"> About Us </h1>
        </div>
    </div>
    <div class="row">
        <div class="text-center col-sm-12 col-lg-12">


            <h3 style="margin-top: 1%; line-height: 150%;"> We are a company that makes the complicated process of calculating taxes extremely simple. We have experts that use specialized applications to calculate how much tax money you <strong>really</strong> owe. Save time, money, and frustration by filing with <em>StateAndCityTaxes</em>.</h3>

        </div>
    </div>
</div>



<!-- End About -->

所有 CSS

/* ---- Start General ---- */

html, body {
    width: 100%;
    height: 100%;

}
body {
  font-family: 'Muli', sans-serif;

}

footer {
    background-color: black;
    color: white;
    height: 8%;
    width: 100%;
    text-align: center;
    padding-top: 1.5%;

}




/* ---- End General ---- */


/* --- Start Navigation --- */


.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  margin-left: 10px;
  width: auto;
}

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: 0px;
}

.navbar {

    background-color: white;
    padding-bottom: .09%;

}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: black;
}

.navbar-inverse .navbar-nav>li{
    padding-top: 3%;

}

.nav .active a { 
    background:white!important;


 } 

 .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: black;
    text-decoration: underline;
}

 .nav.navbar-nav.navbar-right li a {
    color: black;
    font-weight: bold;

}

.navbar.navbar-inverse .navbar-nav>li {
      border-bottom: solid 1px;
      border-color: black;
      text-align: center;
    }

.nav > li > a:focus, 
.nav > li > a:hover 
{
    text-decoration: underline;
}



/* --- End Navigation --- */ 

/* --- Start Slider --- */

video {
    display: none;


}


#link {
    margin: 0px;
    padding:0px;


}
/* --- End Slider --- */


/*--- Media Query ---*/ 








/*--- Media Query ---*/


 /* Extra Small Devices, Phones A.K.A Drop Down Menu */ 

    @media only screen and (min-width : 280px) and (max-width: 767px) {


        /*--- Navigation ---*/ 


        #link {
        margin: 0px;
        padding:0px;
         height: 400px;
        width: 100%;
        object-fit: cover;
        position: absolute;

        }



        .new {
        position: relative;
        font-weight: bold;
        top: 240px;
        left: 40%;
        color: black;

        }

        .fa-arrow-down {

        position: relative;
        top: 270px;
        left: 50%;
        color: white;
        }

        /*--- Navigation ---*/

        /*--- About --- */



        .img-responsive {



        }




        /*--- About --- */

    }

最佳答案

我会尝试将所有其他元素包装到一个 div 中，然后将适当的边距放在该 div 中。由于您使用的是 Bootstrap 的 navbar，因此您可以向主体添加填充，例如 here :

body {
    padding-top: 70px;
}

关于jquery - 如何使元素对绝对定位的元素使用react，就好像它不是绝对定位的一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42502225/

25 4 0
文章推荐： javascript - 如何将javascript应用于 Accordion 内部调用的局部 View ？
文章推荐： php - 三个具有相同名称的选择标签的阅读选项
文章推荐： javascript - 如何执行 NON-LINK 的 JavaScript onClick？
文章推荐： Django 应用程序中的 CSS 功能，但无法再对其进行编辑
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com