ページのサイズを変更するときにボタンが移動しない

-1

私はこのサイト全体を静的に配置していますが、透明なボタンでクリック可能にしたいと考えています。私はボタンが作成されているが、別のサイズのウィンドウなどを持っていれば、その位置にとどまりたい。ページのサイズを変更するときにボタンが移動しない

何か考えている？

HTML：

<img id="container" src="recentProjectsV2.jpg" /> 

<a href="http://gcseanswers.co.uk/" button id="invisibleButton1"> GCSE Answers </a>

CSS：

invisibleButton1 { 

    position: relative; 
    width: 290px; 
    height: 100px; 
    left: 45px; 
    top: -170px; 

    background-color: transparent; 
    border: 10px, orange; 
    font-size: 0; 
    cursor: pointer; 
}

出典

2016-10-09 Benjaminbl12

JSFiddleもお試しください：何を試しましたか？何が起こるのですか？ –

あなたのHTMLコードとCSSコードのすべてを投稿してください – mlegg

あなたはサイズを変更するとき、それはまったく同じ位置に滞在したい場合は、絶対に相対からあなたのボタンの位置を変更する必要があります。デッドセンターのように正確に同じ位置に留めたい場合は、ウィンドウのサイズに関係なく、フレックスボックスを使用することをお勧めします。これはIE 10以降でのみ有効です。

.invisibleButton1 { 
    position: absolute; 
    width: 290px; 
    height: 100px; 
    left: 45px; 
    top: -170px; 
    background-color: transparent; 
    border: 10px, orange; 
    font-size: 0; 
    cursor: pointer; 
}

出典

2016-10-09 17:57:09

助けてくれてありがとうございます。任意の考えか、フレックスボットを使用する必要がありますか？ – Benjaminbl12

または、それを1つの領域に保存するためにイメージを含めてすべて含める必要がありますか？ – Benjaminbl12

jsFiddleを作成できますか？私はこのボタンが入っているコンテナを見るのが好奇心です。 –

ボタンは、あなたが滞在することを告げた位置に留まるん

コード：

CSS：

<style> 
.invisibleButton1 { 

position: relative; 
width: 290px; 
height: 100px; 
left: 45px; 
top: -170px; 
background-color: transparent; 
border: 10px, orange; 
font-size: 0; 
cursor: pointer; 

} 
</style>

HTML：

<body> 
<img id="container" src="logo.jpg" /> 
<a href="http://gcseanswers.co.uk/"> <button id="invisibleButton1"> GCSE Answers </button> </a> 
</body>

の場合これはあなたが探しているものではない、p質問を明確にしてコードを追加してください。

出典

2016-10-09 18:06:58 Ahm23

私の悪い言い訳には申し訳ありません - 私はこのボタンを持っていますが、ただ一つの位置に留まるだけで、軸を指定する必要があります。同じエリア。しかし、ページのサイズを変更すると、もちろん軸番号が保持されるため、ウィンドウが異なるサイズでも同じ場所に留まるようにする必要があります。それが意味をなさないなら...！ – Benjaminbl12

ページのサイズを変更するときにボタンが移動しない

答えて

関連する問題