How To Set Static Position For HTML Element Using CSS

Posted By Bajarangi soft , Posted On 03-11-2020

In HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page. So today we discuss how to set static position for html element using css

How To Set Static Position For HTML Element Using CSS

Step 1:Create index.html file and implement as below code in it.

<p class="static">This is Paragraph</p>

Step 2:Implement CSS code as below to set p element at static position.

<style>
    body {
        background: #2e9ad0;
    }
    .static {
        position: static;
        border: 3px solid red;
    }
</style>

Complete Code For Setting Static Position For HTML Element Using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How To Set Static Position For HTML Element Using CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<style>
    body {
        background: #2e9ad0;
    }
    .static {
        position: static;
        border: 3px solid red;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Set Static Position For HTML Element Using CSS</h1>
    </div>
    <br>
    <div class="well">
        <p class="static">This is Paragraph</p>
    </div>
    <br>
</div>
</body>
</html>

Related Post