Stop-Schaltfläche von Bewegung beim Ändern der Größe

-1

Ich habe dieses ein ganzes Bild, das ich statisch auf meiner Website platziert habe, aber ich möchte die Teile über eine transparente Schaltfläche anklickbar sein. Ich habe die Schaltfläche erstellt, aber ich möchte, dass es in seiner Position bleibt, wenn ich eine andere Größe Fenster usw. hatteStop-Schaltfläche von Bewegung beim Ändern der Größe

Irgendwelche Gedanken?

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; 
}

Quelle

2016-10-09 Benjaminbl12

JSFiddle bitte auch: Was hast du probiert, was passiert, was hast du erwartet? –

Posen Sie alle Ihre HTML-Code und CSS-Code – mlegg

Sie müssen die Position Ihrer Schaltfläche relativ zum absoluten ändern, wenn Sie es in der exakt gleichen Position bleiben wollen, wenn die Größe verändert. Wenn Sie möchten, dass es genau an der gleichen Stelle bleibt, wie vertikal und horizontal, unabhängig von der Fenstergröße, würde ich Ihnen Flexbox empfehlen, die nur mit IE 10 und höher funktioniert.

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

Quelle

2016-10-09 17:57:09

Danke für die Hilfe Alex aber das gleiche Problem, wenn ich mit der Verwendung unterschiedlicher Achse es bewegt sich. Irgendwelche Gedanken oder muss ich flexbot verwenden? – Benjaminbl12

Oder müsste ich alles einschließlich des Bildes einschließen, um es in einem Bereich zu behalten? – Benjaminbl12

Können Sie ein jsFiddle erstellen? Ich bin gespannt auf den Container, in dem diese Schaltfläche ist. –

Der Knopf in der Position nicht bleiben Sie es in

-Code zu bleiben gesagt:.

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>

Wenn das ist nicht was du suchst, p Lege deine Frage klar und füge deinen Code hinzu.

Quelle

2016-10-09 18:06:58 Ahm23

Sorry über meine schlechte Formulierung - Ich habe diese Schaltfläche, aber ich brauche es nur in einer Position zu bleiben und müssen ihre Achse angeben, da es mehrere dieser Schaltflächen sein wird das gleiche Gebiet. Wenn ich jedoch die Größe der Seite ändere, behält sie natürlich ihre Achsenzahlen bei, so dass ich eine Möglichkeit brauche, sie am selben Ort zu halten, selbst wenn das Fenster eine andere Größe hat. Wenn das Sinn macht ...! – Benjaminbl12

Stop-Schaltfläche von Bewegung beim Ändern der Größe

Antwort

Verwandte Themen