Question

每当我将窗口缩小时，页面的所有其他元素似乎都会调整大小，但似乎每当我调整页面大小时“与我联系”按钮似乎都会消失，我一直在试图通过改变按钮的位置来解决这个问题一段时间，但似乎我一直在做的事情已经解决了问题。任何帮助都会很棒，谢谢！

HTML

<!DOCTYPE html>
<html>
<link rel="stylesheet" type= "text/css" href="css/style.css">
<title>Jaylen Cooper</title>
<body>
    <div class="image_one" id="main">
            <img src="http://d2tovwv1y8kfyq.cloudfront.net/wp-content/uploads/2016/07/28105929/tech3.jpg" class="image_one">
            <h1>Hello, My Name Is Jaylen Cooper, And I Develop Websites and User Interfaces</h1>
    </div>  
    <div>
        <button id="myBtn" class="myBtn" align="middle"><a href="#">Contact Me</a></button>
    </div>
        <!-- The Modal -->
    <div id="myModal" class="modal">
         <!-- Modal content -->
         <div class="modal-content">
           <span class="close">&times;</span>
           <h3>CONTACT INFORMATION</h3>
           <form>
            <label for="Email">Email Address</label>
            <input type="text" name="Email"/>
            <label for="Info">Brief Information</label>
            <input type="text" name="lName"/>
            <input type="submit" value="SUBMIT">
           </form>
         </div>
    </div>
        <div class="nav_body">  
            <h2><b><center>My Preferences</center></b></h2>
        </div>
        <div>
            <img src="http://pluspng.com/img-png/coder-png-source-code-icon-1600.png" height="150px" class="image_One">
            <img src="https://png.icons8.com/metro/540/graduation-cap.png" height="100px" class="image_Two">
            <img src="http://www.freeiconspng.com/uploads/brain-2.png" height="150px" class="image_Three">
        </div>
        <div class="text_display">
            <p1 id="text"><b>CODE</b></p1>
        </div>
        <div class="third_text">
            <p5 id="text2"><b><br> The Best Languages that I know right now are<br> HTML,CSS,JavaScript,<br> and a basic ammount of Python<br> and Java.</b></p5>
            <p4 id="text2"><b><br> &#9867<br> I'm always looking to collaborate <br> with other developers on other project<br>If you know any other coding communities <br>Feel Free To Contact Me.</b></p4>
            <p6 id="text2"><b><br> &#9867<br> The Ideas that I usually have<br> are Website Based and Mobile,<br> Want To Pursue SQL.</b></p6>
        </div>
        <div class="fourth_box">
            <h7><b>WORK</b></h7>
        </div>
        <div class="fifth_box">
            <img src="http://www.freepngimg.com/thumb/coming_soon/4-2-coming-soon-png-thumb.png" class="coming_soon">
        </div class="third_text">
        <div class="About_Me">
            <h9><b><center>ABOUT ME</center></b></h9>
        </div>
        <div class="aboutme_box">
            <p id="aboutme_text"><b>I Live In Dallas,Texas  <br>&#9867</b></p>
            <p id="aboutme_text"><b>I'm 19 Years Old.  <br>&#9867</b></p>
            <p id="aboutme_text"><b>I've Been Coding For A Year.  <br>&#9867</b></p>
            <p id="aboutme_text"><b>Graduated High School In 2017.  <br>&#9867</b></p>
            <p id="aboutme_text"><b>Attending Community College For Computer Science 2018.<br>&#9867</b></p>
            <p id="aboutme_text"><b>My Favorite Color Is Blue.  <br>&#9867</b></p>
            <p id="aboutme_text"><b>I Love Watching Twitch On My Down Time. <br> &#9867</b></p>
            <p id="aboutme_text"><b>If You Would Like To Know More About Me Shoot Me A Email.</b></p>
        </div>
        <div class="Hyperlink_images">
            <a href="https://twitter.com/slitheirings">
                <img src="http://www.freeiconspng.com/uploads/twitter-icon--basic-round-social-iconset--s-icons-0.png" class="hyperlink_one" width="100px" id="hyperlink" href="https://twitter.com/slitheirings">
            </a>
            <a href="https://www.instagram.com/coop2824">
                <img src="http://www.freeiconspng.com/uploads/instagram-logo-icon--icon-search-engine-5.png" class="hyperlink_two" width="100px" id="hyperlink" href="https://www.instagram.com/coop2824/"> 
            </a>
            <a href="https://www.facebook.com/profile.php?id=100004979988388">
                <img src="https://cdn.worldvectorlogo.com/logos/facebook-3.svg" class="hyperlink_three" width="100px" id="hyperlink" href="https://www.facebook.com/profile.php?id=100004979988388">
            </a>
            <a href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
                <img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" width="100px" id="hyperlink" href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
            </a>
            <a href="https://github.com/Slitherings">
                <img src="https://image.flaticon.com/icons/svg/25/25231.svg" width="100px" id="hyperlink" href="https://image.flaticon.com/icons/svg/25/25231.svg">
            </a>
        </div>
        <script src="js/jquery.js"></script>
        <script src="js/javascript_index.js"></script>
</body>

CSS

html, body{
margin: 0;
text-align: center;
top: 100%;
}
.nav_body{
height: 100px;
}
h1{
position: absolute;
font-family: sans-serif;
font-size: 52px;
text-align: center;
padding-left: 100px;
padding-right: 100px;
color: white;
top: 250px;
}
.image_one{
position:relative;
width: 100%;
height: 1080px;
opacity: 0.85;
}
.Contact_text{
color: white;
font-size: 24px;
top: 600px;
text-decoration: none;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 750px;
padding-top: 25px;
padding-bottom: 25px;
background-color: black;
opacity: 0.5;
transition-duration: 1s;
position: absolute;
}
.Contact_text:hover{
opacity: 1.0;
color: black;
background-color: white;
}
.Information_Text{
text-decoration: none;
color: white;
font-size: 16px;
position: absolute;
top: 710px;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 785px;
padding-top: 25px;
padding-bottom: 25px;
transition: 1s;
}
.Down_Arrow{
top: 750px;
position: absolute;
padding-left: 100px;
padding-right: 100px;
left: 490px;
}
.Main_Image{
position: absolute;
top: 70px;
padding-left: 100px;
padding-right: 100px;
left: 425px;
}
h2{
font-family: sans-serif;    
font-size: 64px;
text-align: center;
}
.image_One{
padding-left: 20px;
padding-bottom: 50px;
}
.image_Two{
padding-left: 185px;
padding-bottom: 70px;
}
.image_Three{
padding-left: 170px;
top: 40px;
padding-bottom: 50px;
}
p1{
font-family:sans-serif;
text-decoration: none;
font-size: 64px;
color: white;
}
p2{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
p3{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
.text_display{
display: inline-block;
height: 55px;   
padding-top: 25px;
background-color: cadetblue;
width: 100%;
text-align: center;
padding-bottom: 25px;
}
#text{
padding:200px;
}
.second_display{
height: 200px;
display: inline-block;
width: 100%;
}
p4{
font-family: sans-serif;
font-size: 14px;
left: 500px;
}
p5{
font-family: sans-serif;
font-size: 14px;
}
p6{
font-family: sans-serif;
font-size: 14px;
}
#text2{
}
.third_text{
display: inline-block;
padding-top: 50px;
padding-bottom: 50px;
}

.slideshow-container{
max-width: 1000px;
position: relative;
margin: auto;
height: 300px;
}
.prev, .next{
cursor: pointer;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8)
}
.text{
color:cadetblue;
font-size: 15px;
padding: 8px 12px;
bottom: 10px;
width: 100%;
text-align: center;
}
.numbertext{
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
top: 0;
}
.dot{
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display:inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover{
background-color: #717171;
}
.fade{
-webkit-animation-name:fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade{
from {opacity: .4}
to {opacity: 1.0}
}
@keyframes fade{
from{opacity: .4}
to {opacity: 1.0}
}
.fourth_box{
height: 85px;
background-color: cadetblue;
padding-bottom: 150px;

}
@keyframes slider{
0%{
    left: 0;
}   
20%{
    left 0;
}
25%{
    left: -100%;
}
45%{
    left: -100%;
}
50%{
    left: -200%;
}
70%{
    left: -200%;
}
75%{
    left: -300%;
}
95%{
    left: -400%;
}
100%{
    left: -400%;
}
}
#slider{
overflow: hidden;
max-width: 600px;
width: auto;
left: 3500px;
position: fixed;
}
#slider figure img{
width: 20%;
float: left;
}
#slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;
}
h7{
font-size: 64px;
font-family: sans-serif;
color: white;
left: 0;
position: relative;
top: 100px;
}
.contact_background{
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
top: 0;
}
.About_Me{
padding-top: 50px;
height: 100px;
background-color: cadetblue;
}
h9{
font-family: sans-serif;
font-size: 64px;
text-align: center;
color: white;
}
h10{
font-family: sans-serif;
font-size: 32px;
text-align: center;
}

.submit_button{
text-decoration: none;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.clicktoclose{
font-family: sans-serif;
font-size: 16px;
color: white;
text-decoration: none;
}
.coming_soon{
text-align: center;
left: 500px;
}
.fifth_box{
padding-top: 100px;
padding-bottom: 100px;
}
#aboutme_text{
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
}
.aboutme_box{
padding-top: 50px;
padding-bottom: 50px;
}
.Hyperlink_images{
height: 200px;
background-color: cadetblue;
padding:100px;
}
#hyperlink{
padding:100px;
}
.Email_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.Category_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.myBtn{
transition:background-color 1.5s ease;
position: absolute;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
left: 850px;
}
a{
text-decoration: none;
color: white;
font-weight: bold;
font-size: 15px;
}
.myBtn:hover{
background: cadetblue;
}
/* The Modal (background) */
.modal {
transition:background-color 1.5s ease;
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
input[type=text] {
transition:background-color 1.5s ease;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
font-family: sans-serif;
}

input[type=text]:focus {
background-color: coral;
opacity: 0.5;
}
label{
font-family: sans-serif;
font-weight: bold;
font-size: 26px;
}
h3{
font-family: sans-serif;
font-weight: bold;
font-size: 48px;
color: coral;
opacity: 0.4
}
input[type=button], input[type=submit], input[type=reset] {
transition:background-color 1.5s ease;
background-color: cadetblue;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
input[type=button], input[type=submit], input[type=reset]:hover{
background-color: coral;
opacity: 0.5;
font-family: sans-serif;
font-weight: bold;
}

的Javascript

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
var myopacity = 0;

function MyFadeFunction() {
if (myopacity<1) {
  myopacity += .075;
 setTimeout(function(){MyFadeFunction()},100);
}
document.getElementById('myModal').style.opacity = myopacity;
}

MyFadeFunction();

的jsfiddle Click if you want to see in browser

再一次，任何帮助都会很棒，这对我的投资组合网站的开发真的很有帮助，我一直坚持这个问题已经有一段时间了。谢谢！

Answer 1

没关系，通过阅读Ben Kolya Mansleys和Sergiu Post的答案找到答案。谢谢你们的帮助。

对于任何想知道我做了什么的人

.myBtn{
transition:background-color 1.5s ease;
position: relative;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
align-items: center;
justify-content: center;
}

<强> HTML

<div style="width:100%; height: 100%">
  <button id="myBtn" class="myBtn" align="middle"><a href="#">Contact 
  Me</a></button>
</div>

只需将按钮放在div中，然后使用宽度和高度设置样式，并添加以CSS为中心的对齐项和对齐内容。

再次感谢Ben和Sergiu！

Answer 2

您正按下该按钮离开页面：

.myBtn {

    left: 850px;
}

您可以尝试将该行更改为此类行为（根据需要进行调整）：

left: calc(110px + 8em);

调整页面大小时，“与我联系”按钮不会变小

2 个答案: