Classification and Positioning Properties

Property	Possible Values	Description
`display`	`block`, `inline`, `inline-block`, `flex`, `grid`, `none`	Defines how an element is displayed
`visibility`	`visible`, `hidden`, `collapse`	Controls whether an element is visible
`overflow`	`visible`, `hidden`, `scroll`, `auto`	Specifies how content overflows its box
`z-index`	`auto`, `number`	Controls the stack order of elements (higher number appears in front)
`opacity`	`0` to `1` (decimal)	Controls element transparency (`0` = invisible, `1` = fully visible)

Property	Possible Values	Description
`position`	`static`, `relative`, `absolute`, `fixed`, `sticky`	Defines how an element is positioned
`top`	`px`, `%`, `auto`	Moves element from the top edge (for `relative`, `absolute`, `fixed`)
`right`	`px`, `%`, `auto`	Moves element from the right edge
`bottom`	`px`, `%`, `auto`	Moves element from the bottom edge
`left`	`px`, `%`, `auto`	Moves element from the left edge
`float`	`left`, `right`, `none`	Moves an element to the left or right
`clear`	`left`, `right`, `both`, `none`	Prevents elements from floating next to each other

Explanation of position Values

Value	Behavior
`static`	Default positioning (normal document flow)
`relative`	Moves relative to its original position
`absolute`	Moves relative to the nearest positioned ancestor
`fixed`	Stays fixed in place even when scrolling
`sticky`	Sticks to a position until scrolled past

Example:

.box {
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 100px;
    background-color: lightblue;
}

✔ Moves 50px from the top

✔ Moves 100px from the left

✔ Absolute positioning relative to the nearest positioned ancestor

Qus. 1 : What is the default value of the position property?

absolute
static
fixed
relative

Qus. 2 : What should be the value of the width attribute, so that the width of the element adjusts itself to the current width of its parent element?

100rem
100%
100vw
100em

Qus. 3 : What is the purpose of the CSS property position: relative;?

Removes the element from the document flow
Positions the element relative to its normal position
Centers the element on the page
Applies relative positioning to all child elements

Qus. 4 : Match the CSS Position Property with Its Meaning <table class="table table-bordered"><tbody><tr><td>CSS Position Property</td><td>Meaning</td></tr><tr><td>A. static</td><td>1. Positions an element at a fixed place in the viewport</td></tr><tr><td>B. relative</td><td>2. The default position (no special positioning)</td></tr><tr><td>C. absolute</td><td>3. Positions the element relative to the nearest positioned ancestor</td></tr><tr><td>D. fixed</td><td>4. Moves the element relative to its normal position</td></tr><tr><td> </td><td>5. Makes an element float over other elements</td></tr><tr><td> </td><td>6. Aligns the element at the center of the page</td></tr></tbody></table>

A → 5, B → 4, C → 3, D → 1
A → 2, B → 4, C → 3, D → 1
A → 5, B → 4, C → 3, D →6
A → 4, B → 5, C → 3, D → 1

Programs

css code to design a box using div with following specifications

View Solution

css code to design a circle using div with following specifications

View Solution

css code to change the square into circle when mouse is over to the square shape

View Solution

css code to create 3 different colors box which partially overlapped to each other

View Solution

CSS code to blink text using keyframes

View Solution

Design a page titled Website Components

View Solution

Use HTML and CSS to show the word "Welcome" and apply styles: center alignment, large size, bold, underline, and change color on hover.

View Solution