CSSのナビゲーションボタンが左下に移動します

Question

ナビゲーションボタンは画像タイトルの一番上にあります。どちらもホバーにドロップダウンします。次の画像に行くと、ナビゲーションボタンは正しい位置にありますが、前のボタンをクリックすると、ナビゲーション画面全体が右下に移動します。

nav { 
     position: absolute; 
    width: 100% 
    height: 20px; 
    padding-bottom: 2px; 
    z-index: 1; 
    float: right; 
    margin-top: -20px; 
    transition: margin-top 200ms ease-in; 
    background: black; 
    opacity: 0.4; 
    right: 1px; 

} 
.title { 
    position: absolute; 
    width: 85%; 
    height: 20px; 
    padding-bottom: 2px; 
    margin-top: -25px; 
    transition: margin-top 200ms ease-in; 
    background: black; 
    color: white; 
    opacity: 0.6; 
} 

.title-text { 
    float: left; 
    padding-left: 5px; 
} 

.slides:hover .title { 
    margin-top: 0px; 
} 

ここはlinkです。私はこの部分が、コード自体がとにかくまだここ

不器用で固定

Answer 1

は一例です：jsfiddle

あなたが忘れてしまったすべての最初の「;」 heightとwidth 間.nav {で第二position: absoluteを使用していけないとfloatそれがクイックボタンが右側に設定されますので、私は.nav要素にtext-alignを設定し、説明似classes

あなたのボタンのよう

.btn-prev, 
.btn-next{ 
    color: black; 
    background:white; 
    border: 2px solid white; 
    margin: 0px 5px 0px 0px; 
    cursor: pointer; 
    padding: 0px 5px 0px 5px; 
    display: inline-block; 
} 

を接続しよう お互いを除外.navと.btn-*の場合はdisplay: inline-block;（デフォルトは display: block;）ですので、テキストと同様に動作します。