Please enable JavaScript.

Coggle requires JavaScript to display documents.

4.1 Other assorted CSS properties - Coggle Diagram

- - - - and text colour
      - affects background colour
- - - - which affect the edges of an element
    - - anything except static
  - - - top, left, bottom, right
        
        have no effect :warning:
      - static
    - - keeps the element
        
        in the normal flow of the document
      - top, left, bottom, right
        
        are relative to the current position
        
        offsets the element
    - - the element is removed
        
        from the normal flow of the document
      - no space is created for the element
        
        in the page layout
      - top, left, bottom, right
        
        are relative to
        
        closest positioned ancestor (if any)
        
        where positioned means
        
        position is not static
        
        or to the initial containing block
        
        probably the body
    - - top, left, bottom, right
        
        are relative to the containing block
        
        :!!:ALWAYS
        
        will stay in position
        
        no matter what
      - like absolute
        
        no space is created for the element
        
        in the page layout
        
        the element is removed
        
        from the normal flow of the document
      - used to make nav bars/menus
        
        that stay in place
        
        when you scroll
        
        .sidebar { background: var(--colour-indigo-dye); position: fixed; top: 0; left: 0; width: 235px; height: 100%; }
- - - - .sidebar { background: var(--colour-indigo-dye); position: fixed; top: 0; left: 0; width: 235px; height: 100%; padding: 20px 0; transition: all 0.5s ease; }
      - increases velocity towards the middle of the transition
      - slows down at the end
  - - - affects all properties
    - - affects a single property only
    - - affects two properties
- - - - centre
        
        .body-background { transform: rotate(45deg); }
      - corner of image
        
        .body-background { transform-origin: bottom right; transform: rotate(45deg); }