html - 幻灯片位置随着不同尺寸的不同计算机而变化

Question

链接：http ://danielknightstudiob.com/seniorgallery.html

我正在尝试将幻灯片与标题和导航栏居中，它在我的计算机上运行良好，但是一旦我在另一台计算机上检查，它就会开始与导航栏重叠或远离它。简而言之，我遇到了定位问题。

在我有幻灯片的CSS中，

.slideshow {display: block;
            position: absolute; left:28%; top:15%;
            z-index: 0;}

在 HTML 中我有，

dl.image_map {display:block;
              width:1034px;
              height:60px; 
              background:url(http://www.image-maps.com/uploaded_files/3201306121035353_seniornav.jpg); 
              position:absolute; left:20%;  }

Answer 1

这就是为什么浏览器测试很重要的原因，对吧？

您可以尝试在 .image_map 和 .slideshow 上更改为 position: relative，然后调整左侧百分比以实现所需的布局。绝对定位会干扰您的设计对不同浏览器做出适当响应的能力。