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 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
- 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
- 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
css code to design a circle using div with following specifications
css code to change the square into circle when mouse is over to the square shape
css code to create 3 different colors box which partially overlapped to each other
CSS code to blink text using keyframes
