chevron_left
399 points
8 4 3

How to change the position of button in html

CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element.

  1. Move Left - Use a negative value for left.
  2. Move Right - Use a positive value for left.
  3. Move Up - Use a negative value for top.
  4. Move Down - Use a positive value for top.
h2 {
  position: absolute;
  left: 100px;
  top: 150px;
}

 

The position property is specified as a single keyword chosen from the list of values below.

static

The element is positioned according to the normal flow of the document. The top,right,bottom,left, and z-index properties have no effect. This is the default value.

relative

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of toprightbottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

This value creates a new  when the value of z-index is not auto. Its effect on table-*-grouptable-rowtable-columntable-cell, and table-caption elements is undefined.

absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of toprightbottom, and left.

This value creates a new stacking context  when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transformperspective, or filter property set to something other than none, in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of toprightbottom, and left.

This value always creates a new stacking context In printed documents, the element is placed in the same position on every page.

sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block(nearest block-level ancestor), including table-related elements, based on the values of toprightbottom, and left. The offset does not affect the position of any other elements.

This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hiddenscrollauto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior

 

More Posts

How to change the position of button in html? sanchi - May 1
Position elements don't move when the visitor scrolls the browser window up or down. Farkhanda Athar - Aug 30, 2020
How to change buttons content in Javascript? Lalit Kumar - Oct 11, 2020
How to disable submit button after form submission in javascript Sanjana Sagar - May 19
The "stop" button on the toolbar of your browser is used to Tania - Aug 8
How to increase the size of button in html Tushar Shuvro - May 5, 2020
add color to button in html DivyaN - Aug 19
How to change a color of the link in HTML? videepsinghal - Aug 10
How to change voice in google translator. amna - Jul 11
What is the difference between absolute and relative positioning? Hafsa_Rao - Jul 18