你能在CSS中指定虚拟顶部吗？

Question

我现在正在创建照片库，并且img上的目标设置为top: 0。

问题在于我在顶部有一个固定的nav。因此，当我单击图像时，它会正确显示，但nav会覆盖它。

当我尝试调整图像定位到目标位置时，整个CSS移动，图像移动 多个像素[低于或高于]远离原来的位置位于页面上。

无论如何都要创建一个＆＃34;虚拟顶级＆＃34;图像可以在nav以下查看？

CSS

body {
    margin: 0;
    padding: 0;
    border: 0;
    max-height: 100%;
    color: #171717;
    background-color: #000000;
    font-size: .9em;
}
nav {
    width: 100%;
    height: 85px;
    margin: 0;
    position: fixed;
    z-index: 10000;
    top: 0;
    text-align: center;
    background-color: #000;
    opacity: 0.8;
    font-size: .8em;
}
nav li {
    margin-top: 1em;
    display: inline-block;
    list-style-type: none;
}
nav li a {
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 20px 30px;
    font-size: 1.4em;
    text-decoration: none;
    color: #A3A3A3;
}
nav li a:hover {
    background-color: #A3A3A3;
    color: #171717;
}
@media screen and (max-width: 420px) {
    nav {
        margin-top: 0;
        height: 185px;
        margin: 1;
        padding: 0;
    }
    nav li {
        margin-top: 0;
        display: block;
        list-style-type: none;
    }
}
#maincontent {
    width: 960px;
    margin: 0 auto;
    margin-top: 7em;
    background-color: #000;
    color: #fff;
}
#gallery-display {
    height: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-color: #000;
}
#gallery-display img {
    display: block;
    margin: 0 auto;
    height: 500px;
    right: 0;
    left: 0;
}
#gallery-display[id^='image']:target img {
    top: 0;
    display: block;
    margin: 0 auto;
    height: 500px;
}
#gallery-display[id^="image"] img {
    position: absolute;
    top: -500px;
    border: 0;
    -moz-transition: top 0.5s ease-in;
    -ms-transition: top 0.5s ease-in;
    -webkit-transition: top 0.5s ease-in;
    -o-transition: top 0.5s ease-in;
}
#gallery-slider-parent {
    background-color: #000;
    position: relative;
    width: 960px;
    overflow: hidden;
    float: left;
}
#gallery-slider {
    background-color: #000;
    display: inline;
    width: 94%;
    float: left;
    height: 120px;
    overflow: hidden;
    white-space: nowrap;
}
#gallery-slider img {
    height: 75px;
    padding: 15px;
    float: none;
}
#gallery-slider img, #gallery-slider a {
    display:inline-block;
}

HTML

<nav>
    <li><a href="/">Home</a>
    </li>
    <li><a href="/">Photos</a>
    </li>
    <li><a href="/">About</a>
    </li>
</nav>

<div id="maincontent">
    <p id="title">Title of set</p>
    <div id="gallery-display">
        <div id="image-1">
            <img src="image1.jpg">
        </div>
        <div id="image-2">
            <img src="image2.jpg">
        </div>
        <div id="image-3">
            <img src="image3.jpg">
        </div>
    </div>
    <div id="gallery-slider-parent">
        <div id="gallery-slider">
            <a href="#image-1"><img src="image1.jpg" height="75"></a>
            <a href="#image-2"><img src="image2.jpg" height="75"></a>
            <a href="#image-3"><img src="image3.jpg" height="75"></a>
        </div>
    </div>
</div>

添加了我尝试过的建议 - 但没有成功：

#maincontent与position: relative nav仍然覆盖图片

http://jsfiddle.net/7kHBY/2/

Answer 1

可以创建虚拟顶部，我找到了两个解决方案来解决这个问题：

1. 将图库插入DIV并使用top:85px进行设置。有时这种方法并不完美，因为您需要更改所有类型的内容，因此所有页面都需要将内容放入具有相同top声明的DIV中。

2. 将固定导航栏插入包含position:relative和top:85px的DIV。它将创建一个虚拟高度。然后使用position:fixed保留导航栏。

Answer 2

是的，这是唯一可能的选择。

http://jsfiddle.net/4hDrW/

您正在链接到锚点。并且由于锚是目标（并且你无法改变它），所以没有其他选择，然后给目标一个填充顶部：85px;

通常链接到一个锚点，将它放到页面的绝对顶部。哪个不是你想要的。您可以更改目标，这需要编辑整个代码。

或者只是将此代码放入您的页面

#gallery-display img {
    padding-top: 85px;
    display: block;
    margin: 0 auto;
    height: 500px;
    right: 0;
    left: 0;
}