How to make everything under input have static position?

Question

I made a site with a input.
I have a span which acts as a placeholder so I can animate it when the input is selected.
When you select the input, the placeholder(span) moves to the top, like expected.
But the rest of the page will shift up a little bit because the placeholder span is gone. I can't add a bigger margin to the placeholder, even if it is 5000px, the margin doesn't work.

How to make the rest of the page static / make the margin work?

My code (please view fullscreen to see the right text moving, otherwise the top wil move):

@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');

#content {
    width: 80%;

    padding-top: 57px;
    padding-bottom: 50px;

    border: 1px solid #DADCE0;
    border-radius: 10px;
}


.center {
    text-align: center;
}


h1 {
    margin-top: 20px;
   		
    font-family: 'Raleway', sans-serif;
    font-size: 25px;
    font-weight: 500;
   		
    color: #202124;
}

h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #202124;`enter code here`
}

input {
    width: 82%;
    margin-top: 28px;
    padding: 20px 15px;

    border: 1px solid #DADCE0;
    border-radius: 5px;				
}
input:focus {
      outline: none !important;
    border: 2px solid #1A73E8;
    margin-bottom: -2px;
}

.placeholder {
    position: relative;

    left: calc(9% - 3px);
    top: -37px;

    padding: 0 8px;
    margin-left: 12px;

    background-color: white;

    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: rgba(32, 33, 36, 0.60);

    -webkit-transition: top 0.2s, font-size 0.2s; /* Safari 3.1 to 6.0 */
    transition: top 0.2s, font-size 0.2s;
}
.placeholder-moved {
    top: -63px;
    font-size: 12px;
    color: #1A73E8;
     cursor: default;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<html>

	<body>


		<div id="content">

			<div class="center"><img src="assets/logo.png" alt="Logo" width="78px;"></div>

			<div class="center"><h1>Hey</h1></div>
			<div class="center"><h2>Hey there</h2></div>




			<div class="center"><input id="input1" type="text"></div>

			<span class="placeholder" id="placeholder1">Placeholder</span>

			<script>
				$("#input1").focusin(function() {
					$("#placeholder1").addClass("placeholder-moved");
				});
				$("#input1").focusout(function() {
					$("#placeholder1").removeClass("placeholder-moved");
				});

				$("#placeholder1").click(function() {
					$("#input1").focus();
				});
			</script>


			<br>

			This text moves


		</div>


	</body>

</html>

Mikepote · Accepted Answer · 2019-02-02 19:58:05Z

You need a div surrounding your input and the placeholder. Your problem arises from using position:relative which makes the placeholder part of your page, able to effect the positioning of stuff below it. A better solution is to make your placeholder position:absolute which removes it from the layout of the page and puts it into it's own floating layer on top.

It's important that anything with position:absolute will reference itself to the first parent object of it which has position:relative set. So I've made inputholder the anchor of this floating placeholder.

I've done that below, but I had to make some modifications to your positioning (no need to do a calc now with absolute positioning either).

@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');

#content {
    width: 80%;

    padding-top: 57px;
    padding-bottom: 50px;

    border: 1px solid #DADCE0;
    border-radius: 10px;
}


.center {
    text-align: center;
}


h1 {
    margin-top: 20px;
   		
    font-family: 'Raleway', sans-serif;
    font-size: 25px;
    font-weight: 500;
   		
    color: #202124;
}

h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #202124;`enter code here`
}

.inputholder
{
    width: 82%;
    margin: 28px auto 0;
    position: relative;
}

input {
    
    padding: 20px 15px;
    width: 100%;
    border: 1px solid #DADCE0;
    border-radius: 5px;				
}
input:focus {
      outline: none !important;
    border: 2px solid #1A73E8;
    margin-bottom: -2px;
}

.placeholder {
    position: absolute;

    left: 0;
    top: 20px;

    padding: 0 8px;
    margin-left: 12px;

    background-color: white;

    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: rgba(32, 33, 36, 0.60);

    -webkit-transition: top 0.2s, font-size 0.2s; /* Safari 3.1 to 6.0 */
    transition: top 0.2s, font-size 0.2s;
}
.placeholder-moved {
    top: -4px;
    font-size: 12px;
    color: #1A73E8;
     cursor: default;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<html>

	<body>


		<div id="content">

			<div class="center"><img src="assets/logo.png" alt="Logo" width="78px;"></div>

			<div class="center"><h1>Hey</h1></div>
			<div class="center"><h2>Hey there</h2></div>




			<div class="inputholder" >
      <input id="input1" type="text">
			<span class="placeholder" id="placeholder1">Placeholder</span>
      </div>

			<script>
				$("#input1").focusin(function() {
					$("#placeholder1").addClass("placeholder-moved");
				});
				$("#input1").focusout(function() {
					$("#placeholder1").removeClass("placeholder-moved");
				});

				$("#placeholder1").click(function() {
					$("#input1").focus();
				});
			</script>


			<br>

			This text moves


		</div>


	</body>

</html>

Thanks for your well explained answer! I selected it as solution :)

Makhele Sabata · Accepted Answer · 2019-02-02 19:15:35Z

Added the input field and the span inside a div element the set the div height to 100px

$("#input1").focusin(function() {
  $("#placeholder1").addClass("placeholder-moved");
});
$("#input1").focusout(function() {
  if($("#input1").val()==""){
   $("#placeholder1").removeClass("placeholder-moved");
  }
});

$("#placeholder1").click(function() {
  $("#input1").focus();
});

    @import url('https://fonts.googleapis.com/css?family=Raleway:400,500');

    #content {
        width: 80%;
        padding-top: 57px;
        padding-bottom: 50px;
        border: 1px solid #DADCE0;
        border-radius: 10px;
    }


    .center {
        text-align: center;
    }


    h1 {
        margin-top: 20px;
       		
        font-family: 'Raleway', sans-serif;
        font-size: 25px;
        font-weight: 500;
       		
        color: #202124;
    }

    h2 {
        font-family: 'Raleway', sans-serif;
        font-size: 17px;
        font-weight: 500;
        color: #202124;`enter code here`
    }

    input {
        width: 82%;
        margin-top: 28px;
        padding: 20px 15px;

        border: 1px solid #DADCE0;
        border-radius: 5px;				
    }
    input:focus {
          outline: none !important;
        border: 2px solid #1A73E8;
        margin-bottom: -2px;
    }

    .placeholder {
        position: relative;

        left: calc(9% - 3px);
        top: -37px;

        padding: 0 8px;
        margin-left: 12px;

        background-color: white;

        font-family: 'Raleway', sans-serif;
        font-size: 17px;
        font-weight: 500;
        color: rgba(32, 33, 36, 0.60);

        -webkit-transition: top 0.2s, font-size 0.2s; /* Safari 3.1 to 6.0 */
        transition: top 0.2s, font-size 0.2s;
    }
    .placeholder-moved {
        top: -63px;
        font-size: 12px;
        color: #1A73E8;
         cursor: default;
    }

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
        <html>
    
        	<body>
    
    
        		<div id="content">
    
        			<div class="center"><img src="assets/logo.png" alt="Logo" width="78px;"></div>
    
        			<div class="center"><h1>Hey</h1></div>
        			<div class="center"><h2>Hey there</h2></div>
    
    
    
                <div style="height:100px">
        			<div class="center"><input id="input1" type="text"></div>
    
        			<span class="placeholder" id="placeholder1">Placeholder</span>
               </div>
<br/>

		This text moves

Collectives™ on Stack Overflow

How to make everything under input have static position?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related