Содержание

CSS: Свойство position | Заметки разработчика

Свойство position распространяется на все элементы и может иметь одно из пяти возможных значений:

  • static
  • relative
  • absolute
  • fixed
  • inherit

position:static

Из раздела 9 Модель визуального форматирования:

Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства ‘top’, ‘right’, ‘bottom’ и ‘left’ не применяются.

На что следует обратить внимание в этом примере:

  • Второй блок отображается там же, где бы он отображался без определения position
  • Значения задаваемые для top не используются, поскольку для блоков с ‘static’ значение всех смещений всегда ‘auto’

Что следует помнить:

  • Если свойство элемента position имеет значение static, то элементу нельзя указать его расположение.
  • Так как static это значение по умолчанию, то нет необходимости указывать это значение, если только оно не переопределяет другое значение позиционирования блока.

position:relative

Из раздела 9 Модель визуального форматирования:

Положение блока рассчитывается в соответствии с нормальным потоком (это называется позиционированием в нормальном потоке). Затем блок смещается относительно своего нормального положения. Когда для расположения блока используется модель относительного позиционирования, то положение следующего рассчитывается так, как будто первый блок не был смещён относительно своего нормального положения.

На что следует обратить внимание в этом примере:

  • Блок ‘два’ смещён ниже на 300 пикселей, но блок ‘три’ и его содержимое остались на месте. Выглядит как будто содержимое блок ‘два’ съехало со страницы, оставив свой след. Это выглядит так, потому что ‘relative’ (относительное) позиционирование не нарушает нормальный поток.
  • Блок с относительным позиционированием накладывается на следующие элементы и отображается перед другими блоками.

Что следует помнить:

  • Вычисленные значения всегда left = -right и top = -bottom. Если контейнер блока имеет значение direction равное ltr, то используется значение ‘left’, а ‘right’ = -left. Если direction контейнера блока имеет значение равное rtl, то используется значение ‘right’, а ‘left’ игнорируется.
  • В отличии от ‘absolute’ (абсолютной) модели, свойства top, right, bottom и left ни могут растянуть или сжать блок, они не могут влиять на его размер.

position:absolute

Из раздела 9 Модель визуального форматирования:

Положение блока (можно и размер) указываются с помощью свойств ‘top’, ‘right’, ‘bottom’, и ‘left’. Они указывают смещение относительно содержащего блока. Абсолютно позиционируемые блоки изымаются из нормального потока и не влияют на размещение следующих элементов потока. Следует заметить, что поля блоков с абсолютным позиционированием не перекрываются ни какими другими полями.

На что следует обратить внимание в этом примере:

  • В связи с тем, что смещение не указано, блок ‘два’ не перемещён относительно своей нормальной позиции, но если бы мы использовали, например: top:0;left:0; блок находился бы в левом верхнем углу окна просмотра.
  • Макет отображается так, как если бы блоку ‘два’ присвоили стиль: display:none. Блок был удалён из потока.
  • С блоком ‘два’ удалённым из поток, блок ‘три’ переместился вслед за блоком ‘один’ (параграфы последовали за ним).
  • Как и все элементы удалённые из потока, блок ‘два’ был сжат по горизонтали.

Что следует помнить:

  • Для любого элемента с позиционированием ‘absolute’ или ‘fixed’ вычисляемое значение display:block.
  • ‘Содержащий блок’ это блок который определяет позиционирование контекста. Оно устанавливается ближайшим предком с ‘position’ установленной в ‘absolute’, ‘relative’ или ‘fixed’. Это означает, что родительский блок может и не быть содержащим блоком.
  • Положение по умолчанию, абсолютно позиционируемого блока, не всегда бывает в стиле top:0;left:0; (в LTR контексте), на это есть две причины:
  1. В содержащем блоке позиционирование блока определяется позиционированием ближайшего предка, если такового нет, то указанный контейнер является корневым элементом. Содержащий блок в котором расположен корневой элемент это прямоугольная область называемая начальным содержащим блоком. Для устройств без разбивки страниц он имеет размер области просмотра(окна или другой области просмотра на экране) и он прикреплён к странице. В этом примере показан блок позиционируемый относительно видимой области (по умолчанию, содержащий блок).
  2. Элемент позиционируемый относительно отступов блока, а не содержимого блока и не бордюра содержащего блока. Этот новый пример демонстрирует где находился бы блок ‘два’ если бы границы отступа блока не касались границы содержимого блока (содержащий блок — элемент body).
  • Размер окна может быть определён значениями свойств: top, right, bottom и left. Например обнуление этих свойств сделает блок растянутым по размеру видимой области. Обнуление всех смещений блока (Примечание: в IE6 блок не растянется)
  • Для создания маски наложения, которая не прокручивается вместе с документом (как в предыдущем примере) можно использовать либо fixed фиксированное позиционирование вместо absolute абсолютного, либо установить стиль body в position:relative как начального блока позиционирования области просмотра (стиль элемента html не работает в IE). Пример наложения.
  • position:absolute запускает haslayout.
  • Самое главное, что следует помнить:

    • Использование этой схемы позиционирования является плохой практикой, так как она удаляет блоки из потока.

    position:fixed

    Из раздела 9 Модель визуального форматирования»:
    Фиксированное позиционирование является под категорией абсолютного позиционирования. Разница в том, что при фиксированном положении блока, содержащий блок определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения. Для устройств с постраничной разбивкой блоки с фиксированным положением повторяются на каждой странице. Это удобно для размещения подписей внизу каждой страницы. Блоки, которые больше чем область страницы обрезаются. Части блока с фиксированным позиционированием, которые не видны в начальном содержащем блоке, не будут напечатаны.
    На что следует обратить внимание в примере:

    • В связи с тем, что фиксированное позиционирование является под категорией абсолютного позиционирования, то всё, что было верно для ‘absolute’, так же верно и для ‘fixed’ (элемент сжимается по горизонтали, удаляется из потока и т.д.)
    • Блок позиционируется относительно видимой области и не прокручивается вместе со страницей.
    • В IE6, блок отображается как ‘static’ блок, но есть «забавный» обходной путь для этого.
    • При печати документа, блок ‘два’ отобразится на каждой странице.

    Что следует помнить:

    • Положение блока рассчитывается в соответствии с ‘absolute’ моделью, но кроме этого блок фиксируется относительно некоторой ссылки. В случае использования следующих медиа типов: handled, projection, screen, tty и tv блок фиксируется относительно видимой области и не перемещается при прокрутке.
    • Содержание блока может быть не доступным для просмотра пользователями, если оно находится за пределами видимой области.
    • В случае использования медиа типа ‘print’, авторы могут не хотеть что бы элемент отображался на каждой странице. Тогда лучше использовать следующие правили для @media:
    @media print {
      #logo {position: static;}
    }
    
  • Как и position:absolute, position:fixed запускает haslayout в EI.
  • position:inherit

    Если для блока указан position:inherit, то он будет принимать такие же вычисленные значения свойств как и его родительский блок.
    Обратите внимание, что IE6 и IE7 не поддерживают это значение, кроме тех случаев когда используется direction и visibility (см CSS: Значение свойства: inherit)

    Что следует помнить:

    Смещение блока
    Помните, что при абсолютном и фиксированном позиционировании блоков, значения установленные в процентах для top, right, bottom и left вычисляются в соответствии с размерами содержащего блока (который может быть не родительским блоком)
    ‘position’ и ‘overflow’
    Блок со стилем overflow:hidden будет обрезать элементы с относительным позиционированием (вложенные блоки), но никогда не будет скрывать блоки с абсолютным позиционированием. Это связано с тем, что родительский блок не всегда является содержащим блоком (ближайшего предка с ‘position’ установленной в ‘absolute’, ‘relative’ и ‘fixed’).
    Это означает, что элементы с абсолютным позиционирование отобразятся вне блока со стилем overflow:hidden если этот блок не является содержащим блоком или внутренним элементом указанного блока. Данный пример показывает как это работает.
    Поля
    Авторы могут использовать поля элементов вне зависимости от схемы их позиционирования.
    В случае с IE
    В IE позиционирование блока может быть благословением или проклятием:

    • В IE6, position:relative (с haslayout) могут быть использованы отрицательные поля для предотвращения обрезания блока родительским контейнером (пример демонстрирующий решение этой проблемы).
    • Позиционированный элемент может «мешать» расположению блоков в IE6 и 7 и может создавать наложение содержимого (пример)

    Порядок наложения и уровень наложения

    • В соответствии с последовательностью исходного кода, позиционированные блоки могут выплывать перед блоками расположенными в нормальном потоке.
    • Авторы могут указывать уровень наложения через свойство ‘z-index’, только на позиционированные блоки.
    • В IE6 и 7, просто факт позиционирования может вызывать наложение контента (пример см. выше).

    Аналогия с призраками DrLangbhani:

    Элемент с относительной позицией всегда смещён относительно своего нормального положения в потоке. Другими словами, он смещён относительно того места где был бы при нормальных обстоятельствах и его смещение не влияет на положение элементов расположенных вокруг него. Это как призрак, который покинул своё тело. Тело, которое имеет ширину, высоту и оказывает влияние на окружение, но невидимо. Призрачные блоки в могут перемещаться, но всё ещё связаны со своим телом и его позиция по прежнему измеряется от него. Теперь элемент с абсолютным позиционированием, с ним ещё проще. Он больше не влияет на своё окружение (он вырван из потока). Он как настоящий призрак без тела. Что касается, родственных элементов, то он их больше не беспокоит, как если бы его не существовало. Что бы узнать свое положение он просматривает каждого предка пока не найдёт элемент с position:relative [position:fixed] или position:absoluter. Этот элемент будет служить точкой отсчёта. Если он не найдёт элемент с позиционированием, то будет ориентироваться относительно документа.

    Абсолютное позиционирование в CSS: понять раз и навсегда

    Вы все еще не понимаете как работает абсолютное позиционирование в CSS и теряете элементы на экране? Давайте разбираться в этой магии.

    Введение в позиционирование

    Когда вы устанавливаете position: absolute, на первый план выходит не сам элемент, а его родительский контейнер, ведь относительно него и осуществляется позиционирование в CSS. Сложность в том, что это не всегда непосредственный родитель элемента.

    Рассмотрим код с четырьмя дивами, вложенными друг в друга по принципу матрешки.

    <body>
    <div>
      <div>
        <div>
          <div></div>
        </div>
      </div>
    </div>
    </body>

    Блоки box-1, box-2 и box-3 для красоты отцентрированы с помощью свойств margin: auto и свойств flex CSS. Блок box-4 остается в своей дефолтной позиции в потоке документа.

    body {
      display: flex;
    }
    
    .box-1,
    .box-2,
    .box-3 {
      display: flex;
      margin: auto;
    }

    Все 4 элемента имеют позиционирование по умолчанию. На данный момент верстка выглядит следующим образом:

    .box-4 без позиционирования

    Относительно чего позиционируем?

    Чтобы спозиционировать себя, элемент должен знать две вещи:

    • какой родитель станет точкой отсчета;
    • величину смещения относительно точки отсчета (сверху, снизу, справа или слева).

    Если определить position: absolute для box-4, этот элемент покинет нормальный поток документа. Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).

    .box-4 с абсолютным позиционированием без смещения

    Теперь добавим свойства top: 0 и left: 0. Элемент должен определить, какой родительский контейнер станет точкой отсчета для этих координат. Ей становится ближайший элемент с нестатической позицией (чаще всего position: relative). box-4 начинает поочередно опрашивать своих предков. Ни box-3, ни box-2, ни box-1 не подходят, так как имеют позиционирование в CSS по умолчанию (unset).

    Если позиционированный предок не нашелся, элемент размещается относительно тела документа (body):

    .box-4 с абсолютным позиционированием. Родительские элементы без позиционирования

    Если установить position: relative для элемента box-1, точкой отсчета станет он:

    .box-4 с абсолютным позиционированием. .box-1 с относительным позиционированием

    Абсолютно позиционированный элемент располагается относительно ближайшего позиционированного предка.

    Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.

    Если установить position: relative также для box-2, то box-4 будет позиционироваться относительно него, ведь этот предок ближе.

    .box-4 с абсолютным позиционированием. .box-2 с относительным позиционированием

    Аналогично и для контейнера box-3:

    .box-4 с абсолютным позиционированием. .box-3 с относительным позиционированием

    А вот и наглядный красивый CSS-пример поиска позиционированного предка:

    Перевод статьи How to understand CSS Position Absolute once and for all.

    Еще больше полезных статей по CSS:

    Устранение смещения якорей из-за фиксированного блока, HTML+CSS

    Впервые я столкнулся с этим, когда делал на своем сайте выплывающую панель «Поделиться в соц сетях» при скролле поста вниз (попробуйте).

    При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал. Вы можете опробовать это сами, кликнув по ссылке «A» ниже.

    А так как сейчас очень популярно делать фиксированные шапки и меню position:fixed, прилепленные к верхней части экрана, то думаю что этот пост будет интересен многим. В нём я рассмотрю несколько вариантов якорей с отступами от верхней границы экрана при переходе по ним.

    Для более ясного понимания на все h3-заголовки я добавил заливку.

    A: Стандартный якорь

    Пример того, как работает стандартная ссылка-якорь. Если вы попали сюда, кликнув по ссылке, а не просто проскроллили страницу, то скорее всего заголовок у вас оказался полностью скрыт под панелью соц сетей.

    Возможно было бы правильнее назвать пост не «5 методов…», а «4 метода…». Потому что это и не метод вовсе, а показательный пример того, как быть не должно, ну да ладно.

    Б: Отступ в виде псевдоэлемента

    Используем псевдоэлемент для добавления отступа перед элементом — :before или :after.

    Поддержка браузерами: Chrome конечно же, IE8+, Firefox 3+, Opera 9.25+, Safari 3+.

    Замечания:

    • Требуется поддержка браузером CSS псеводоэлементов.
    • Метод не работает корректно, если у элемента есть фон или заливка (наезжает на контент).
    • Не работает корректно, если у элемента есть свойства padding-top или border-top.
    #link-B:before {
    	display: block;
    	content: "";
    	height: 55px;
    	margin: -55px 0 0;
    }

    В: Положительный padding и отрицательный margin

    Используем padding для создания отступа и отрицательный margin, чтобы этот же отступ убрать, а точнее — сделать его незаметным для пользователей.

    Обратите внимание, что внутренные отступы padding тоже попадают под заливку, то есть, если у вашего элемента будет фон, то он скорее всего наедет на контент перед ним. Для того, чтобы игнорировать padding при добавлении фона на элемент, используйте CSS-свойство background-clip:content-box.

    Поддержка браузерами: Chrome конечно же, Firefox 4.0+, Opera 10.6+, Safari 3+.

    Замечания:

    • Необходима поддержка браузером background-clip:content-box, но это только в том случае, если вы хотите добавить фон элементу.
    • Некоторые ограничения при использовании margin (в том числе при margin-collapse — это когда из нижнего отступа первого элемента и верхнего отступа второго определяется наибольший, который и становится величиной отступа между этими элементами).
    • Невозможность использования padding-top.
    #link-C {
    	padding-top: 55px;
    	margin-top: -55px;
    	-webkit-background-clip: content-box;
    	background-clip: content-box;
    }

    Г: Border и отрицательный margin

    По сути то же самое, что и предыдущий метод, но вместо padding используем border. Что это нам даёт?

    • Теперь вы спокойно можете использовать внутренние отступы padding.
    • Постараюсь выразиться правильно — по идее border — это тот же padding, но только с заливкой и эффектами. Поэтому при использовании фона или заливки элемента нам нужно учесть, чтобы она распростаранялась на сам элемент и на padding, но не на border (ведь он то у нас прозрачный), здесь поможет background-clip:padding-box.
    • Ограничение в использовании border-top, которое однако легко решаемо — смотрите ниже.

    Поддержка браузерами: Chrome конечно же, Firefox 1.0+, Opera 10.5+, Safari 3+.

    #link-D {
    	border-top: 55px solid transparent;
    	margin-top: -55px;
    	padding: 15px; /* паддинги - без проблем */
    	-moz-background-clip: padding;
    	-webkit-background-clip: padding-box;
    	background-clip: padding-box;
    }

    Д: Метод Г с возможностью добавления border-top

    Дополнение к предыдущему методу, которое позволит добавить на элемент верхний border. Поддержка браузерами псевдоэлементов и background-clip (только при наличии фона или заливки) обязательна.

    Поддержка браузерами: Chrome конечно же, Firefox 3.5+, Opera 10.5+, Safari 3+.

    #link-E {
    	position: relative; /* важно - для того, чтобы псевдоэлемент позиционировался относительно этого элемента */
    	border-top: 55px solid transparent;
    	margin-top: -55px;
    	-moz-background-clip: padding;
    	-webkit-background-clip: padding-box;
    	background-clip: padding-box;
    }
    #link-E:before {
    	content: "";
    	position: absolute;
    	top: -2px; /* равен по модулю толщине border */
    	left: 0;
    	right: 0;
    	border-top: 2px solid #ccc; /* собственно то, ради чего всё затевалось */
    }

    Миша

    Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

    Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

    Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

    position | CSS справочник

    Поддержка браузерами



    12.0+7.0+1.0+1.0+4.0+1.0+

    Описание

    CSS свойство position указывает тип позиционирования элемента на веб странице. Позиционирование определяет относительно чего, при смещении, будет позиционироваться элемент: относительно окна браузера, других элементов или текущего местоположения на веб-странице.

    Вместе со свойством position используются свойства top, right, bottom и left, которые управляют смещением позиционированного элемента.

    Если элементу с абсолютным или фиксированным позиционированием установить свойства top, left, right, bottom со значением 0, то используя свойство margin со значением auto, элемент можно центрировать и по вертикали и по горизонтали.







    Значение по умолчанию:static
    Применяется:ко всем элементам
    Анимируется:нет
    Наследуется:нет
    Версия:CSS2
    Синтаксис JavaScript:object.style.position=»absolute»

    Синтаксис

    position: static | absolute | fixed | relative | inherit;

    Значения свойства







    ЗначениеОписание
    staticЭлемент находится в нормальном потоке и отображается на веб-странице в том месте, в котором он расположен в коде HTML-документа. Применение свойств top, left, right и bottom к элементу со статическим позиционированием не даст никакого эффекта.
    absoluteЭлемент с абсолютным позиционированием удаляется из нормального потока, другие элементы, расположенные в коде после него, смещаются на веб-странице на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно окна браузера. При прокрутке содержимого в окне браузера, элемент прокручивается с остальным содержимым веб-страницы.
    fixedЭлемент с фиксированным позиционированием удаляется из нормального потока, другие элементы, расположенные в коде после него, смещаются на веб-странице на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно окна браузера. При прокрутке содержимого в окне браузера, элемент остаётся на месте, т. е. не прокручивается с остальным содержимым веб-страницы.
    relativeЭлемент с относительным позиционированием остаётся в нормальном потоке. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его текущей позиции, однако, так как элемент находится в нормальном потоке, на его месте на веб-странице остаётся пустое пространство.
    inherit:Указывает, что значение наследуется от родительского элемента.

    Пример


    div#myDIV {
    width: 100px;
    height: 100px;
    background: red;
    left: 10px;
    top: 100px;
    position: static;
    }

    Выравнивание блоков div по центру (css, div html). — deadblog.ru

    Выравнивание блоков div по центру (css, div html).

    В данной статье я расскажу, как поместить блок div по центру. Способов существует множество, но далеко не все позволяют сделать именно то, что требуется. Я приведу в пример самые лучшие и простые способы.

    Вообще, есть дюжина способов как правильно выровнять div блок по центру, каждый вебмастер использует свой любимый\наиболее удобный способ. Но тем не менее, есть несколько основных, наиболее популярных и универсальных способа. И конечно-же, валидные по всем современным стандартам.

    И да, стоит сразу сказать, что данные способы могут не работать в ie6, или чём-то подобном. Я даже не обращаю внимание на данный браузер, не смотря на то, сколько людей им пользуется. Пора бы уже отучивать пользоваться старьём.

    Итак, что мы имеем?

    Способ 1. Самый крутой

    margin:0 auto;

    Очень эффективный метод, который к тому-же позволяет выровнять отступы сверху и снизу. В чём фишка метода? Всё просто до безумия. Мы имеем блок с определённой шириной (в пикселях, либо процентах), которому с помощью свойства «auto» задаём одинаковый отступ справа и слева, в итоге получаем div-блок по центру. Первое значение (0 в примере) — это отступ сверху и снизу.

    К примеру, для выравнивания сверху пишем:

    margin:10px auto;

    Для выравнивания сверху и снизу:

    margin:10px auto 5px;

    На мой взгляд — это самый лучший способ выровнять блоки по центру. К тому-же он полностью валидный.

    Способ 2. Процентный

    Если блок имеет ширину в процентах, то мы можем выровнять div по центру применяя равные отступы, чтобы добить полную ширину до 100%. Кто не понял, покажу на примере, так проще:

    Имеем блок шириной 50%, чтобы выровнять его по центру, нам нужно боковые отступы сделать по 25% справа и слева соответственно. Смотрим код:

    #test2 {
      margin:0 25% 0 25%;
      width:50%;
    }

    Не напрягаясь, получаем блок по центру, выровненный банальной математикой (50 + 25 + 25) 🙂

    Способ 3. Смешанный

    Данный способ посоветовал в комментариях sman.

    #test3 {
      left: 50%;
      margin-left: -500px;
      position: absolute;
      width: 1000px;
    }

    Как я упоминал в начале статьи, способов выровнять блок по центру огромное множество. Каждый выбирCgает тот, который ему больше по душе. Жду комментариев и новых способов 🙂

    Способ 4. Использование дополнительного блока

    Способ предложил Виктор в комментариях:

    Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).

    В таких случаях использую дополнительный блок, который обворачивает выравниваемый блок. Стиль примерно так:

    #dop-block {
      position: relative;
      float: right;
      right: 50%;
    }
    #block {
      position: relative;
      float: left;
      left: 50%;
    }

    Позиционирование элементов в CSS | w3.org.ua

    Свойство position позволяет задавать расположение элементов. Для свойства position можно задать следующие значения:

    • static
    • relative
    • fixed
    • absolute

    Элементы, к которым применено свойство position можно позиционировать используя свойства:

    • top — отступ сверху
    • left — отступ слева
    • right — оступ справа
    • bottom — отступ снизу

    Перечисленные свойства top, left, right, bottom не работают, пока к элементу не применено свойство position

    Если свойства left и right противоречат друг другу, то сработает только left. Аналогично при top и bottom, которые противоречат друг другу, сработает только top.

    position: static

    HTML элементы позиционируются как static по умолчанию. Т.е. элементы выводятся в основном потоке — так, как записаны в коде HTML. Все элементы, которым не задано свойство position, позиционируются как static.

    position: relative

    Если к элементу применено свойство position: relative, то элемент не изменяет своей позиции. После применения свойств left, top, right, bottom, элемент смещается относительно своей первоначальной позиции на указанное значение. Данное смещение не влияет на остальные элементы.

    position: fixed

    Если к элементу применили свойство position: fixed, то он будет позиционироваться относительно окна браузера, и не будет изменять своего положения при прокрутке документа.

    Свойство position: fixed часто применяется для фиксирования заголовков при прокрутке сайта, фиксирования кнопки Вверх или других подобных элементов.

    position: absolute

    При абсолютном позиционировании, элемент будет позиционироваться относительно ближайшего родителя, к которому применено любое свойство position, либо, если такого элемента нет, то относительно окна браузера.

    Если к элементу применено свойство position: absolute, то оно отменяет свойство float.

    Порядок наложения элементов с помощью z-index

    При использовании позиционирования элементов, можно добиться их наложения. Однако, порядок наложения по умолчанию определяется тем, как элементы записаны в коде HTML. Так, первый элемент в коде HTML, будет при наложении изображен на заднем плане. Последний описанный элемент коде HTML будет изображен на переднем плане.

    Изменить порядок наложения можно с помощью свойства CSS z-index. Так, если к двум элементам применен z-index, то тот элемент, у которого z-index больше, будет отображен на переднем плане.

    Свойство z-index работает только с элементами, к которым применено свойство position.

    Свойство z-index это просто число, без единиц измерения.

    Иногда нужно выровнять блочный элемент по центру экрана так, чтобы даже при изменении ширины блок оставался по центру. Для этого используют свойство margin: 0 auto. Подробный пример можно посмотреть здесь.

    позиция — Tecnologia Web para desenvolvedores

    Esta tradução está em andamento.

    Свойство , позиция , encontrada no CSS, определение como um elemento pode ser posicionado (renderizado) no documento (página). Essa propriedade ( , позиция ) pode ser acompanhada de outras, tais como, top , right , bottom , and left , queterminam como ficará a localização final do objeto des locjeto, allowindo será apresentado adiante.

    Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

    Tipos de posicionamentos

    • Um elemento posicionado é um elemento cujo valor de sua posição pode ser computado (Calculado) como relative , absolute , fixed , or sticky .(Em outras palavras, são todos esses, com excursion do static , sendo estático o valor como padrão do elemento.)
    • Um elemento denominado com posicionamento relativo , ou относительно позиционированный элемент , это um elemento cuja função é Calculada ao ser Definida a position como valor relative . Com isso, a propriedade top e bottom определено или определено или проектируется по вертикали, а положение элемента, которое определено по static ; Não sendo outro, o left e o right , por sua vez, definedo deslocamento горизонтально.
    • Um elemento denominado com posicionamento absoluto , ou Абсолютно позиционированный элемент , это элемент определен и вычислен как атрибут позиция или ценность абсолютная или фиксированная . Com верхний , правый , нижний и левый é Возможные особые элементы или скрытые элементы (борда), содержащие блоки. (O, содержащий блок, ou blocos que envolvem um elemento é Definido como um antecessor relativo ao qual o elemento está posicionado, acomplado ou englobado.Se por ventura o elemento tiver Definido margens (margin), ele são adicionados ao deslocamento (смещение). O elemento createdelecerá um novo context de formatação do bloco (BFC) para seus context.
    • Um elemento denominado com posicionamento adesivo (!), Или закреплен за элементом , является определенным элементом и вычисляется как атрибут позиция como valor sticky . Sendo tratado como um posicionamento relativo até que ultrapasse (atinja) os limites do bloco no qual está contido.(Соберите конфигурацию свойства top com um valor diferente de automatático (auto)) Dentro do seu fluxo Principal (fluxo raiz, ou o contêiner no qual ele desloca-se), No momento que há o deslocamento da página o elemento é tratado como «preso» ou «stuck» até encontrar-se com as paredes opostas do bloco no qual esteja contido.

    Maior parte do tempo, um elemento de posicionamento absoluto que tem height e width configurados como auto são Dimensions de Acordo com seu context interno.Тем не менее, незамещенные, абсолютно позиционированные элементы можно сделать так, чтобы они заполняли доступное вертикальное пространство, указав как верхний , так и нижний и оставив неуказанным высоту (то есть авто ). Их также можно сделать так, чтобы они заполняли доступное горизонтальное пространство, указав слева и справа и оставив шириной как авто .

    Exceto para esses casos descritos abaixo (Para elementos de posicionamento absoluto que preenchem o espaço disponível):

    • Se ambos top e bottom são Definidos (tecnicamento não sendo auto ), top prealece.
    • Se ambos left e right são Definidos, left prevalece quando direction é ltr (Direção da escrita Portuguesa, Japonês na horizontal, etc.) e right prealece quando RTL (Padrão de escrita em idiomas como Persa, Arabe, Hebraico и т. д.).

    Sintáxe

    A propriedade position é Definida com apenas uma palavra-chave da lista abaixo.

    Доблести

    статический
    Элемент позиционируется в соответствии с обычным потоком документа. Свойства верхний , правый , нижний , левый и z-index не имеют никакого эффекта . Это значение по умолчанию.
    родственник
    Элемент позиционируется в соответствии с обычным потоком документа, а затем смещается на относительно себя на основе значений вверху , справа , внизу и слева .Смещение не влияет на положение других элементов; таким образом, пространство, отведенное для элемента в макете страницы, такое же, как если бы позиция была static .
    Это значение создает новый контекст наложения, когда значение z-index не равно auto . Его влияние на table - * - group , table-row , table-column , table-cell и table-caption элементов не определено.
    абсолютное
    Элемент удаляется из обычного потока документов, и для него не создается пространство в макете страницы.Он позиционируется относительно ближайшего предка, если таковой имеется; в противном случае он размещается относительно исходного содержащего блока. Его окончательное положение определяется значениями верхний , правый , нижний и левый .
    Это значение создает новый контекст наложения, когда значение z-index не равно auto . Поля абсолютно позиционированных блоков не сжимаются с другими полями.
    фиксированный
    Элемент удаляется из обычного потока документов, и для него не создается пространство в макете страницы.Он позиционируется относительно начального содержащего блока, установленного окном просмотра, за исключением случаев, когда один из его предков имеет преобразование , перспективу или , фильтр , для которого установлено значение, отличное от none (см. Спецификацию преобразований CSS) , и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что есть несоответствия браузера с перспективой и фильтром , способствующим формированию блока.) Его окончательное положение определяется значениями верхний , правый , нижний и левый .
    Это значение всегда создает новый контекст наложения. В печатных документах элемент помещается в одно и то же положение на на каждой странице .
    липкий
    Элемент позиционируется в соответствии с обычным потоком документа, а затем смещается относительно своего ближайшего предка с прокруткой и содержащего блока (ближайшего предка на уровне блока), включая элементы, связанные с таблицей, на основе значений верхних , справа , снизу и слева .Смещение не влияет на положение других элементов.
    Это значение всегда создает новый контекст наложения. Обратите внимание, что липкий элемент «прилипает» к своему ближайшему предку, у которого есть «механизм прокрутки» (создается, когда переполнение - скрыто , прокрутка , авто или оверлей ), даже если этот предок не t ближайший предок, выполняющий прокрутку. Это эффективно предотвращает любое «липкое» поведение (см. Проблему Github на W3C CSSWG).

    Sintáxe формальный

     статический | родственник | абсолютный | липкий | фиксированный 

    Примеры

    Posicionamento relativo

    Относительно расположенные элементы смещены на заданную величину от их нормального положения в документе, но без влияния смещения на другие элементы. В приведенном ниже примере обратите внимание, как другие элементы размещены, как если бы «Два» занимали пространство своего обычного расположения.

    HTML
     
    Один
    Два
    Три
    Четыре
    CSS
    .box {
      дисплей: встроенный блок;
      ширина: 100 пикселей;
      высота: 100 пикселей;
      фон: красный;
      белый цвет;
    }
    
    #два {
      положение: относительное;
      верх: 20 пикселей;
      слева: 20 пикселей;
      фон: синий;
    }
     

    Absoluto Posicionamento

    Элементы, которые расположены относительно друг друга, остаются в обычном потоке документа. Напротив, элемент, который находится в абсолютном позиционировании, извлекается из потока; таким образом, другие элементы позиционируются так, как если бы его не было. Абсолютно позиционированный элемент позиционируется относительно своего ближайшего предка (т.е.е. ближайший предок, не являющийся статическим ). Если позиционированный предок не существует, он позиционируется относительно ICB (начальный содержащий блок - см. Также определение W3C), который является содержащим блоком корневого элемента документа.

    Простой пример:

     

    Абсолютное позиционирование

    Я элементарный элемент базового уровня. Соседние элементы уровня блока располагаются на новых строках ниже меня.

    По умолчанию мы покрываем 100% ширины нашего родительского элемента, и мы достигаем высоты нашего дочернего содержимого.Наша общая ширина и высота - это наше содержимое + отступ + ширина / высота границы.

    Нас разделяют наши поля. Из-за сворачивания поля мы разделяем ширину одного из наших полей, а не обоих.

    встроенные элементы , подобные этому и this , располагаются на одной строке друг с другом и смежными текстовыми узлами, если на той же строке есть место. Переполняющиеся встроенные элементы переносятся на новую строку, если это возможно - как эта, содержащая текст , или просто переходите к новой строке, если нет, как это будет с этим изображением:

     body {
    ширина: 500 пикселей;
      маржа: 0 авто;
    }
    
    п {
      фон: цвет морской волны;
      граница: сплошной синий цвет 3px;
      отступ: 10 пикселей;
      маржа: 10 пикселей;
    }
    
    span {
      фон: красный;
      граница: сплошной черный 1px;
    }
    
    .positioned {
      позиция: абсолютная;
      фон: желтый;
      верх: 30 пикселей;
      слева: 30 пикселей;
    } 

    Posicionamento fixo

    Фиксированное позиционирование аналогично абсолютному позиционированию, за исключением того, что содержащий блок элемента является начальным содержащим блоком, установленным окном просмотра , если только какой-либо предок не имеет преобразование , перспективу или свойство фильтра , установленное на что-то другое чем нет (см. Спецификацию преобразований CSS), что затем заставляет этого предка занять место элементов, содержащих блок.Это можно использовать для создания «плавающего» элемента, который остается в одном положении независимо от прокрутки. В приведенном ниже примере поле «Один» зафиксировано на расстоянии 80 пикселей от верхнего края страницы и 10 пикселей от левого края. Даже после прокрутки он остается на том же месте относительно области просмотра.

    HTML
     

    Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam congue Tortor Eget pulvinar lobortis. Vestibulum ante ipsum primis в faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor toror. Sed tempor nisl a lorem conquat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.

    Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam congue Tortor Eget pulvinar lobortis. Vestibulum ante ipsum primis в faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor toror. Sed tempor nisl a lorem conquat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.

    Один
    CSS
     .box {
      ширина: 100 пикселей;
      высота: 100 пикселей;
      фон: красный;
      белый цвет;
    }
    
    #один {
      положение: фиксированное;
      верх: 80 пикселей;
      слева: 10 пикселей;
      фон: синий;
    }
    
    .external {
      ширина: 500 пикселей;
      высота: 300 пикселей;
      переполнение: прокрутка;
      отступ слева: 150 пикселей;
    }
     

    Posicionamento Adesivo

    Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкая позиция

    CSS · Bootstrap

    Получите подробную информацию о ключевых элементах инфраструктуры Bootstrap, включая наш подход к лучшей, быстрой и надежной веб-разработке.

    HTML5 doctype

    Bootstrap использует определенные элементы HTML и свойства CSS, которые требуют использования типа документа HTML5.Включите его в начало всех ваших проектов.

      
    
      ...
      

    Первый мобильный

    В Bootstrap 2 мы добавили дополнительные стили, удобные для мобильных устройств, для ключевых аспектов платформы. В Bootstrap 3 мы с самого начала переписали проект, чтобы он был удобен для мобильных устройств. Вместо добавления дополнительных мобильных стилей они встроены прямо в ядро. Фактически, Bootstrap сначала является мобильным . Стили Mobile first можно найти во всей библиотеке, а не в отдельных файлах.

    Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте метатег видового экрана к вашему .

        

    Вы можете отключить возможности масштабирования на мобильных устройствах, добавив user-scalable = no в метатег области просмотра . Это отключает масштабирование, что означает, что пользователи могут только прокручивать, и в результате ваш сайт будет больше похож на собственное приложение.В целом мы не рекомендуем это на всех сайтах, поэтому будьте осторожны!

        

    Типографика и ссылки

    Bootstrap устанавливает базовые глобальные стили отображения, оформления и ссылок. В частности, мы:

    • Установить цвет фона: #fff; на корпусе
    • Используйте атрибуты @ font-family-base , @ font-size-base и @ line-height-base в качестве нашей типографской базы
    • Установите глобальный цвет ссылки через @ link-color и примените подчеркивание ссылок только на : hover

    Эти стили можно найти в строительных лесах .менее .

    Normalize.css

    Для улучшения кроссбраузерности рендеринга мы используем Normalize.css, проект Николаса Галлахера и Джонатана Нила.

    Контейнеры

    Bootstrap требует наличия содержащего элемента для обертывания содержимого сайта и размещения нашей грид-системы. Вы можете выбрать один из двух контейнеров для использования в своих проектах. Обратите внимание, что из-за заполнения и более ни один из контейнеров не является вложенным.

    Используйте .container для адаптивного контейнера фиксированной ширины.

      
    ...

    Используйте .container-fluid для контейнера полной ширины, охватывающего всю ширину области просмотра.

      
    ...

    Bootstrap включает в себя адаптивную мобильную первую систему гибкой сетки, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра. Он включает в себя предопределенные классы для простых вариантов макета, а также мощные миксины для создания более семантических макетов.

    Введение

    Системы

    Grid используются для создания макетов страниц с помощью ряда строк и столбцов, в которых размещается ваш контент. Вот как работает сетка Bootstrap:

    • Строки должны быть помещены в контейнер .container (фиксированная ширина) или .container-fluid (полная ширина) для надлежащего выравнивания и заполнения.
    • Используйте строки для создания горизонтальных групп столбцов.
    • Содержимое следует размещать внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
    • Предопределенные классы сетки, такие как .row и .col-xs-4 , доступны для быстрого создания макетов сетки. Меньше миксинов также можно использовать для более семантических макетов.
    • Столбцы создают промежутки (промежутки между содержимым столбца) через отступ . Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на .row s.
    • Отрицательная маржа - вот почему приведенные ниже примеры неактуальны. Это значит, что содержимое столбцов сетки совмещается с содержимым вне сетки.
    • Столбцы сетки создаются путем указания количества из двенадцати доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три .col-xs-4 .
    • Если в одной строке помещается более 12 столбцов, каждая группа дополнительных столбцов будет, как одно целое, переноситься на новую строку.
    • Классы сетки применяются к устройствам с шириной экрана, большей или равной размеру точки останова, и переопределяют классы сетки, нацеленные на устройства меньшего размера. Следовательно, e.грамм. применение любого класса .col-md- * к элементу не только повлияет на его стиль на средних устройствах, но и на больших устройствах, если класс .col-lg- * отсутствует.

    Посмотрите примеры применения этих принципов к вашему коду.

    Мы используем следующие медиа-запросы в наших файлах Less для создания ключевых точек останова в нашей сеточной системе.

      / * Очень маленькие устройства (телефоны, менее 768 пикселей) * /
    / * Нет медиа-запроса, так как это значение по умолчанию в Bootstrap * /
    
    / * Маленькие устройства (планшеты, 768 пикселей и выше) * /
    @media (min-width: @ screen-sm-min) {...}
    
    / * Средние устройства (настольные компьютеры, 992 пикселей и выше) * /
    @media (min-width: @ screen-md-min) {...}
    
    / * Большие устройства (большие рабочие столы, 1200 пикселей и выше) * /
    @media (min-width: @ screen-lg-min) {...}  

    Мы время от времени расширяем эти медиа-запросы, добавляя max-width , чтобы ограничить CSS для более узкого набора устройств.

      @media (max-width: @ screen-xs-max) {...}
    @media (min-width: @ screen-sm-min) и (max-width: @ screen-sm-max) {...}
    @media (min-width: @ screen-md-min) и (max-width: @ screen-md-max) {...}
    @media (min-width: @ screen-lg-min) {...}  

    Параметры сетки

    Посмотрите, как аспекты системы сеток Bootstrap работают на нескольких устройствах с помощью удобной таблицы.

    Очень маленькие устройства
    Телефоны (<768 пикселей)
    Маленькие устройства
    Таблетки (≥768 пикселей)
    Средние устройства
    Настольные компьютеры (≥992 пикселей)
    Большие устройства
    Настольные компьютеры (≥1200 пикселей)
    Поведение сетки По горизонтали всегда Свернут для начала, горизонтально над контрольными точками
    Ширина контейнера Нет (авто) 750px 970px 1170px
    Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
    Кол-во столбцов 12
    Ширина колонны Авто ~ 62 пикс. ~ 81 пикс.

    Как сделать так, чтобы элементы с абсолютным позиционированием перекрывали их переполнение. Скрытый родительский элемент - Передняя / Задняя

    Я думаю, каждый фронтенд-разработчик хоть раз сталкивался с такой ситуацией.Допустим, вам нужно что-то позиционировать в абсолютном положении ... А затем вы пытаетесь переместить его в каком-то направлении, и оно исчезает ... Вы забыли, что родительский элемент был установлен на overflow: hidden , и теперь ваш элемент теряется в скрытом бесконечном вакууме .

    Что ж, обычно все заканчивается тем, что элемент absolute помещается за пределы надоедливого родителя overflow: hidden , и вы ворчите по поводу того, что CSS - отстой и так далее… На самом деле вы совершенно правы. CSS - отстой, даже CSS3, я имею в виду… ладно, здесь нет тролля 🙂

    Позвольте мне показать вам ловкий трюк.

    Но сначала, если вы пытаетесь изменить эти абсолютные / относительные свойства, вам действительно следует знать несколько важных правил:

    • Абсолютно позиционированный элемент фактически позиционируется относительно относительного родителя , или ближайшего найденного относительного родителя , что означает, что он всплывает вверх по DOM, пока не найдет относительный контекст для применения позиционирования.
    • Если родственник не найден, он достигнет максимально возможного «контейнера», которым является окно браузера, также известное как окно просмотра (или документ , может быть, , или окно …? Эй, знаете что, Я не эксперт W3C, ладно!).
    • Кстати, вероятно, поэтому они назвали его «ре-лативным», просто говоря 😛
    • Он работает так же, если родительский элемент установлен на абсолютное вместо относительного ( абсолютное внутри другого absolute ) первый абсолют действует как контекст позиционирования для второго абсолютного.

    В любом случае, здесь наша основная проблема в том, что относительный родитель также является переполнением : скрытым . Что ж, если мы просто переместим правило на позицию , чтобы поставить его всего на один уровень выше, то проблема будет решена.Правда. Разве это не волшебство? На самом деле нет, это не волшебство.

    И позвольте мне доказать, что я говорю.

    HTML

      

    CSS

     .parent {
      положение: относительное;
      переполнение: скрыто;
    }
    .child {
      позиция: абсолютная;
      верх: -10 пикселей;
      слева: -5 пикселей;
    } 

    Результат

    Действительно, мы действительно можем видеть, что маленький синий квадрат частично скрыт его скрытым родительским элементом переполнения.

    Теперь решение

    Теперь давайте добавим еще одного родителя и переместим позицию : относительный на один уровень вверх (или, в вашем контексте, вы могли бы просто использовать существующего верхнего родителя).

    HTML

      

    CSS

     .grand-parent {
      положение: относительное;
    }
    .parent {
      / * позиция: относительная; * /
      переполнение: скрыто;
    }
    .child {
      позиция: абсолютная;
      верх: -10 пикселей;
      слева: -5 пикселей;
    } 

    Результат

    Магия.

    Ресурсы

    Статья Тьерри Кобленца, в которой объясняются различные техники «очистки поплавков» И демонстрируется этот хитрый трюк.
    * Сама запись
    * Скрытая / абсолютная демонстрация переполнения (которой, по-видимому, больше нет ...)

    Как это:

    Нравится Загрузка ...

    Мышь не обнаружена или не работает в Windows

    Обновлено: 30.06.2020 компанией Computer Hope

    Может быть несколько проблем, из-за которых мышь не работает должным образом с Microsoft Windows.Эта страница содержит решения, которые могут помочь.

    Наконечник

    Вы можете использовать клавиатуру для навигации в Windows или подключить другую мышь, которая работает для доступа к областям Windows, упомянутым на этой странице. Для получения справки по навигации с помощью клавиатуры см .: Как перемещаться в Windows с помощью клавиатуры.

    Компьютер заморожен

    Когда компьютер зависает, обычно первым признаком является то, что мышь перестала отвечать. Если указатель мыши внезапно перестал отвечать, выполните следующие действия, чтобы определить, полностью ли завис компьютер.

    Использование клавиши Num Lock

    Убедитесь, что компьютер не завис, нажав клавишу Num Lock на клавиатуре. При повторном нажатии Num Lock светодиодный индикатор Num Lock на клавиатуре должен включаться и выключаться. Если этот показатель не меняется, ваш компьютер завис; это означает, что все оборудование на компьютере (включая мышь) не будет работать. Перезагрузите компьютер, чтобы решить эту проблему. Если у вас нет светового индикатора, переходите к следующей части этого раздела.

    На клавиатуре нет индикатора Num Lock

    Если на вашей клавиатуре нет индикатора, описанного в предыдущем разделе, в любом месте Windows нажмите одновременно клавиши Ctrl + Alt + Del .Это действие должно вызвать синий экран параметров Windows. Вы можете выйти из этого меню, нажав клавишу Esc . Если вы не перейдете к синему экрану в течение нескольких секунд, ваш компьютер завис. Перезагрузите компьютер, чтобы решить эту проблему.

    Конфликт оборудования

    Если какое-либо новое оборудование было недавно установлено на компьютере, удалите его, чтобы убедиться, что новое оборудование не вызывает конфликта с вашей существующей мышью.

    Мышь подключена неправильно

    Выполните следующие действия, чтобы убедиться, что мышь правильно подключена к компьютеру.

    USB-мышь

    Если вы используете USB-мышь, отсоедините кабель мыши и снова подключите к другому USB-порту. Если мышь подключается к концентратору USB, попробуйте подключить мышь к порту USB на задней панели компьютера.

    Беспроводная мышь

    1. Убедитесь, что беспроводная мышь получает питание, проверив наличие какого-либо индикатора питания (обычно это световой индикатор). Если у вашей мыши есть выключатель питания, он часто находится на нижней стороне.
    2. Если мышь не включается, замените батареи.
    3. Убедитесь, что беспроводной приемник находится в пределах досягаемости и не заблокирован слишком большим количеством предметов.
    4. Отключите беспроводной USB-адаптер и попробуйте подключить его к другому порту.

    Мышь PS / 2

    С помощью мыши PS / 2 проверьте заднюю часть компьютера, чтобы убедиться, что она подключена к порту мыши PS / 2, а не к клавиатуре PS / 2. Если в прошлом мышь работала правильно (т. Е. Не новая мышь), выключите компьютер, отключите и снова подключите мышь.

    Заметка

    Мышь PS / 2 не следует отключать и снова подключать, когда компьютер включен.

    Наконечник

    Если клавиатура компьютера работает, завершите работу Windows, нажав клавишу Windows, а затем с помощью клавиш со стрелками и клавиши Tab выберите «Завершение работы».

    Конфликт программного обеспечения или драйверов

    Загрузитесь в безопасном режиме Windows.