How to work with Position Property of Cascading Style Sheets

To work with Position Property of Cascading Style Sheets

The Position tab of the CSS Selector Inspector lets you define the positioning properties of any floating element formatted with the style, including position, clipping behavior, rank in the stacking order, overflow behavior, and visibility.

1. Sets control that position floating elements.
   

2. Sets stacking order of floating elements.
   

3. Sets display properties of excessive content in elements.

To edit the positioning properties of a style:

Step 1.

• First of all, you have to select a style in the Style Sheet window, and then click the Position tab in the CSS Selector Inspector.

Step 2.

• And then choose the select a positioning method from the Kind menu:

  1. Choose Absolute, and then type the coordinates (preferably in pixels) in the Left and Top text boxes to specify the position of the floating element with respect to the upper left corner of the browser’s main display area.
     

  2. Choose Static to let the element flow with the text.
     

  3. Choose Relative, and then type the coordinates (preferably in pixels) in the Left and Top text boxes to specify the position of the element with respect to the parent element.

Step 3.

• To specify the size of the element, type in the measurements in the Width and Height text boxes.

Step 4.

• To specify where and how the element is visually cropped when it overlaps with the adjacent elements, you have to select a clipping method from the pop-up menu:

  1. Choose Auto to let the browser determine the clipping properties.
     

  2. Choose Rect to crop the element to a rectangular box, and then type the measurement by which the element is to be cropped in the Top, Right, Bottom, and Left text boxes.

Step 5.

• Set the stacking order of floating elements by assigning a numeral to each layer in the Z-Index text box.

• If two elements overlap, the one with the higher z-index conceals a portion of the other.

Step 6.

• In the Overflow pop-up menu, set the overflow property to determine how the element will behave if the content outgrows to specified size. Choose any of the following options:

  1. Visible causes the element to grow with its content.
     

  2. Scroll adds a vertical or horizontal scrollbar to the element.
     

  3. Hidden hides excessive content.
     

  4. Auto defaults to the browser’s preferences for handling excessive content.

Step 7.

• In the Visibility pop-up menu, set the visibility property to determine whether the element is displayed or not when the browser loads the page.

• The visibility property is useful, as an initial setting that scripting will override. You have choose any of the following options:

  1. Inherited assumes the visibility property of the parent element.
     

  2. Visible lets you display the element when the browser loads the page.
     

  3. Hidden hides the element from view.