如何解决带position的Div元素:与其他浏览器一起显示在页面上的不同位置
Here是我正在研究的网站。
在第三部分中,您可以看到不同品牌的徽标,我试图将标题文本“ Brands”放置在橙色箭头上方。在台式机上的Chrome上看起来非常完美,但是在所有其他浏览器(包括MOBILE上的Chrome)上,位置都非常差。
我在父div和其他div元素上尝试了“ position:relative”,但似乎没有任何效果。这是我的代码:
#brands {
position: relative;
}
.container-brand {
position: relative;
}
.arrow-img {
position: absolute;
left: -460px;
top: -38px;
z-index: 300;
width: 713px;
}
.brand-title {
position: absolute;
margin-top: -40px;
z-index: 400;
color: #fff;
}
.top-row-brands {
margin-top: 100px;
}
<section id="brands">
<div class="container container-brand">
<div class="row brands container-brand">
<div class="arrow col-sm-3 container-brand">
<img class="arrow-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/arrow.png">
</div><!--col-->
<div class="brand-title col-sm-3">
<h1>Brands</h1>
</div><!--col-->
</div><!--row-->
<div class="row top-row-brands">
<div class="col-3 col-md-3 col-lg-3 col-brands">
<img class="img-fluid" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/brands-01.png">
</div>
<div class="col-3 col-md-3 col-lg-3 col-brands">
<img class="img-fluid" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/brands-02.png">
</div>
<div class="col-3 col-md-3 col-lg-3 col-brands">
<img class="img-fluid" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/brands-03.png">
</div>
<div class="col-3 col-md-3 col-lg-3 col-brands">
<img class="img-fluid" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/brands-04.png">
</div>
<div class="col-3 col-md-3 col-lg-3 col-brands">
<img class="img-fluid" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/brands-05.png">
</div>
<div class="col-3 col-md-3 col-lg-3 col-brands">
<img class="img-fluid" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/brands-06.png">
</div>
<div class="col-3 col-md-3 col-lg-3 col-brands">
<img class="img-fluid" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/brands-07.png">
</div>
</div><!--row-->
</div><!--container-->
</section>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。