CSS Position_Marged

Duration: 10 min

This video lesson is available to enrolled students.

Return to /learn/BIHAR-STET-COMPUTER-SCIENCE-COMPLETE-COURSE/unit-10-web-development/css/css-text-properties/asset-css-position-marged after enrolling

Inside: a video lesson and guided study material.

Module outline

  1. About the course: About the Course
  2. Mathematical Aptitude: Number System, HCF LCM, Divisibility Rules, Percentage, Ratio and Proportion (Ratios), Average, Profit and Loss, Time and Work, Mensuration and Geometry, Simple Interest and Compound Interest, Speed Time and Distance, Age Problems, Mixture and Alligation, Algebra, Powers and Exponents (Surds and Indices), Pipe and Cistern, Trigonometry, Statistics, Data Interpretation, Arithmetic
  3. Logical Reasoning: Series (Number and Letter Series) (Numerical Relations and Reasoning), Coding Decoding, Analogy, Blood Relations, Directions (Direction Test), Ranking, Order and Sequence, Non Verbal Reasoning (Spatial Aptitude) (Spatial Reasoning) (Visual Reasoning), Seating Arrangements, Syllogisms, Venn Diagram, Puzzle Solving (Puzzles), Logical Sequence Of Words, Deductive and Inductive Reasoning (Logical Deduction and Induction) (Prepositional Reasoning), Analytical Reasoning (Counting Figures Reasoning), Cubes & Dices, Calendar, Clock
  4. General Knowledge: Physics, Chemistry, Biology, History, Geography, Polity, Indian Economy, GK- Current Affairs, Static General Knowledge
  5. Art of Teaching: Nature, Objectives & Characteristics of Teaching, Learners & Learning Process, Factors Affecting Teaching, Methods of Teaching, Classroom Management & Communication, Teaching-Learning Aids & ICT Integration, Evaluation, Assessment & Measurement, Professional Development & Ethics, Policies, Acts & Contemporary Issues, Curriculum & School Environment, Guidance, Counselling & Mental Health, Inclusive Education & Special Needs, Micro-Teaching & Teaching Skills, Lesson Planning
  6. Environmental Science: Environment
  7. Unit 1 | Digital Electronics: Digital Systems & Boolean Basics, Logic Gates & Hardware, Boolean Expression, Boolean Minimization, Combinational Circuit, Sequential Circuits, Number System, Number Representation
  8. Unit 2 | COA: Basics of COA, Floating Point Rep, Cache Memory Organization, Input Output Organisation, Instr Formats & Modes, Control Unit Design, Register Transfer and Microoperations, Programming the Basic Computer
  9. Unit 3 | C Programming: C Fundamentals, Control Flow, Functions, Arrays & Pointers, Storage Classes, Structures & Enums, DMA, Macros, Scoping & File Handling
  10. Unit 3 | Data Structures: Introduction to DS, Array, Stack, Queue, Linked List, Tree, Graphs, Hashing
  11. Unit 4 | Algorithms: Algorithm Analysis, Time Complexity Analysis, Sorting Algorithms, Dynamic Programming, Minimum Spanning Trees, Shortest Path Algos, Advanced Algorithms
  12. Unit 5 | Operating System: Introduction to OS, Process Management, CPU Scheduling, Process Synchronization, Threads & Process Creation, Deadlock, Memory Management, Virtual Memory, Disc Scheduling, File Management
  13. Unit 6 | Database Management System: Basics of DBMS, ER Diagram, Relational Model & Functional Dependencies, Keys & Integrity Constraints, Normalization (1NF - BCNF), Decomposition Properties & 4NF, File Organization & Indexing, Relational Algebra, SQL, Transaction Management, Concurrency Control
  14. Unit 7 | Computer Networks: Introduction to CN, Data Communication, DLL: Access Control, DLL: Flow Control, DLL: Error Control, DLL: Framing, Data Link Layer - Ethernet, Net Layer: IPv4 & Proto, Net Layer: IP Addressing, Net Layer:Routing Protocol, Transport Layer Services, TL: Congestion & UDP, Application Layer
  15. Unit 8 | Software Engineering: Fundamentals of Software Engineering, Software Requirements and Quality Assurance, Software Design, Estimation and Metrics, Software Testing, Software Maintenance and Configuration Management
  16. Unit 9 | Object Oriented Programming: OOPS with C++
  17. Unit 10 | Web Development: HTML Basics, CSS, JavaScript-Basics, XML
  18. Unit 11 | Theory Of Computation: Introduction to TOC, Deterministic FA (DFA), Non-Deterministic FA, Regular Expressions, Grammar, Regular Language Properties, Moore & Mealy Machines, Pushdown Automata & CFG, Turing Machines
  19. Unit 12 | IoT: Emerging Tech Trends, Cloud Computing
  20. Unit 13 | Artificial Intelligence: Approaches to AI, Search Algorithms, Game Playing, Knowledge Representation, Natural Language Processing, Artificial Neural Networks, Genetic Algorithms
  21. Unit 14 | E-Commerce: Electronic Data Interchange and E-Commerce, Role of Internet and Web Services, Security in Mobile and Wireless Computing, Physical Security and Cryptography Basics, Cyber Safety and Security
  22. Unit 15 | Multimedia: Multimedia
  23. Unit 16 | Python: Introduction to Python, Tokens, Variables, Data Types, I/O, Operators & Expressions, Control Flow & Looping, Collections & Strings, Functions & Modules, File Handling & Data Analysis, DSA using Python
  24. Full Length Mock Tests — General Paper:
  25. Full Length Mock Tests — Computer Science (Paper II):
AI summary & chapters

AI Summary

An AI-generated summary of this video lecture.

This lecture introduces CSS positioning, focusing on the position property and its five values: static, relative, fixed, absolute, and sticky. The instructor begins by defining the position property as specifying how an element is placed on a webpage, then systematically explains each value. Static positioning is the default, placing elements in normal document flow and ignoring top, bottom, left, and right properties. Relative positioning keeps the element in normal flow but allows it to be moved relative to its original position using offset properties. Absolute positioning removes the element from normal flow and positions it relative to the nearest positioned ancestor, with other content not adjusting to fill gaps. Sticky positioning behaves like relative until a scroll threshold is reached, then behaves like fixed. Code examples and browser demonstrations illustrate each positioning type.

Chapters

  1. 0:00 – 2:00 00:00-02:00

    The lecture opens with a slide titled 'CSS Positioning' that defines the position property as specifying how an element is positioned on a webpage. The slide lists all five possible values: static, relative, fixed, absolute, and sticky. A red rectangular box appears on the right side to illustrate a positioned element. The instructor underlines key terms like 'position', 'element', and 'webpage' while explaining that static is the default value where elements follow normal document flow. The transition to detailed explanation of position: static begins with a code example showing the syntax selector { position: static; }.

  2. 2:00 – 5:00 02:00-05:00

    The instructor explains that static positioned elements are not affected by top, bottom, left, and right properties, emphasizing this with red circles and underlines. Red arrows connect code snippets to rendered output to show how static elements behave in normal flow. The lesson then transitions to position: relative, explaining that the element remains in normal flow but can be moved relative to its original position. A note appears stating that setting top, right, bottom, and left properties will cause the element to be adjusted away from its normal position. The instructor demonstrates a div element with position: relative and left: 30px to show the offset behavior.

  3. 5:00 – 9:58 05:00-09:58

    The lecture covers position: absolute, explaining that the element is removed from normal flow and positioned relative to the nearest positioned ancestor. A code example shows a red-bordered div with position: absolute, and hand-drawn diagrams illustrate how absolute positioning works relative to an ancestor. The instructor points out that other content will not adjust to fill any gap left by the absolutely positioned element. The lesson then transitions to position: sticky, defining it as behaving like relative until a specified scroll position is reached, then behaving like fixed. A browser preview demonstrates the sticky element behavior with on-screen text 'I have position sticky!' and red circles highlighting key terms like 'relative', 'fixed', and 'sticky'.

The lecture follows a systematic progression through CSS positioning values, starting with the foundational concept of the position property and moving from default behavior to more complex positioning schemes. The teaching method combines slide-based definitions with live code examples and browser demonstrations, using visual annotations like red boxes, arrows, circles, and underlines to emphasize key concepts. The instructor clearly distinguishes between positioning values that maintain normal flow (static, relative) and those that remove elements from flow (absolute), while introducing sticky as a hybrid behavior. Each positioning value is explained with its syntax, behavioral characteristics, and practical implications for layout, creating a comprehensive understanding of how CSS positioning controls element placement on webpages.

Loading lesson…