CSS Стили
  • !important
  • ::-ms-browse
  • ::-ms-check
  • ::-ms-clear
  • ::-ms-expand
  • ::-ms-fill
  • ::-ms-reveal
  • ::-ms-value
  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::placeholder
  • ::selection
  • :active
  • :checked
  • :default
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :lang
  • :last-child
  • :last-of-type
  • :link
  • :not
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :root
  • :target
  • :valid
  • :visited
  • @charset
  • @font-face
  • @document
  • @import
  • @keyframes
  • @media
  • @page
  • @viewport
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • backface-visibility
  • background
  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-left
  • border-left-color
  • border-left-width
  • border-radius
  • border-right
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • border-top-right-radius
  • box-shadow
  • box-sizing
  • caption-side
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
    • Alpha
    • BasicImage
    • Blur
    • Chroma
    • DropShadow
    • Emboss
    • Engrave
    • Glow
    • Gradient
    • ICMFilter
    • Light
    • MaskFilter
    • Matrix
    • MotionBlur
    • Shadow
    • Wave
  • flex-basis
  • flex-direction
  • float
  • font-family
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • height
  • hyphens
  • image-rendering
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-height
  • min-width
  • object-fit
  • opacity
  • orient
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • position
  • quotes
  • resize
  • right
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index

CSS стиль position

CSS стиль position определяет, как элемент должен быть спозиционирован на web-странице.
Internet Explorer Chrome Opera Safari Firefox
7 1 4 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Краткая информация по CSS-свойству position

Значение по умолчаниюstatic
НаследуетсяНет
ПрименяетсяКо всем элементам

Правила написания свойства position

position: absolute | fixed | relative | static
 | sticky

absolute - элемент становится абсолютно позиционированым, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента не существует. Положение элемента задается свойствами left, top, right и bottom. Также на положение элемента влияет значение свойства position родительского элемента. Так, если у родителя position: static или нет родителя, то отсчет координат будет вестись от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат будет вестись от края родительского элемента.

fixed - по своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке страницы. Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. Opera показывает полосы прокрутки, но они не влияют на позицию элемента.

relative - положение элемента в этом случае устанавливается относительно его исходного места. Свойства left, top, right и bottom изменяют позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

static - в этом случае элементы отображаются как обычно. Свойства left, top, right и bottom не меняют позицию элемента.

sticky - позволяет создавать «липкие» блоки, которые будут вести себя как фиксированные, но при этом не перекрывать другие блоки. Т.е, пока на странице есть свободное место, блок остается на месте, но, если при скролле страницы на «липкий» блок наезжают другие блоки, они сдвигают его.

Значение sticky поддерживается в Firefox 43+, с префиксом -webkit - в Safari 9+ и iOS Safari 8.4+.

Объектная модель

Объект.style.position

Пример применения стиля position

Проиллюстрируем работу position на примере, рассмотрев работу свойств position: relative; и position: absolute;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля position</title>
<style>
div {
    background: red;
    position: relative;
    width: 20px;
    height: 20px;
    top:20px;
    left:50px;
}
.abs {
    position: absolute;
    background: blue;
}
</style>
</head>
<body>
  <div>
    <div class="abs"></div>
  </div>
</body>
</html>
Применение свойства position
Применение свойства position
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
© 2009-2017 WebSketches.ru