Сдвинуть div на 10px в верх и в лево
Есть div (красный квадрат) с position:absolute, который автоматическти установился в верхнем левом углу: Надо его сдвинуть на 10 px в верх и в лево: 
Вопрос: как? p.s. пробовал margin-top:-10px; margin-left:-10px;, получилось так: 
Отслеживать
задан 29 июл 2013 в 16:11
5,109 11 11 золотых знаков 49 49 серебряных знаков 97 97 бронзовых знаков
@michael @Kison размеры сохранились, однако не показывает его за пределами родителя, несмотря на z-index:100, выше которого нет
29 июл 2013 в 17:11
Уберите свойство overflow:hidden у родителя или установите overflow:visible, скорее всего проблема изначально в этом.
Функция translate
Функция translate задает сдвиг элемента по оси X и оси Y. Используется совместно со свойством transform . Значением свойства служат любые единицы для размера.
Может принимать один или два параметра. Если параметров два — первый параметр задает сдвиг по оси X, а второй — по оси Y. Если параметр один, то он задает сдвиг по оси X.
Значения параметров могут быть положительными и отрицательными. Положительное значение по оси X сдвигает вправо, отрицательное — влево. Положительное значение по оси Y сдвигает вниз, отрицательное — вверх.
Синтаксис
Пример
Если навести мышкой на блок — он сдвинется на 30px вправо:
#elem < border: 1px solid black; width: 100px; height: 50px; >#elem:hover < transform: translate(30px); >
Пример
Если навести мышкой на блок — он сдвинется на 30px влево:
#elem < border: 1px solid black; width: 100px; height: 50px; >#elem:hover < transform: translate(-30px); >
Пример
Если навести мышкой на блок — он сдвинется на 15px вправо и на 30px вниз:
#elem < border: 1px solid black; width: 100px; height: 50px; >#elem:hover < transform: translate(15px, 30px); >
Смотрите также
-
translate ,
- функцию translateX ,
которая задает сдвиг по оси X - функцию translateY ,
которая задает сдвиг по оси Y translateZ ,
которая задает сдвиг по оси Z - функцию translate3d ,
которая задает сдвиг по трем осям —>
которая задает сдвиг по осям X и Y —>
Относительное и абсолютное позиционирование в HTML
05.05.2015
8110
Рейтинг: 5 . Проголосовало: 1
Вы проголосовали:
Для голосования нужно авторизироваться
Введение
Данная статья будет полезной для новичков в мире Web-разработки, поскольку в ней будут рассмотрены основные сценарии использования свойства position .
Под позиционированием подразумевают расположение элемента в заданной системе координат. Можно выделить четыре типа позиционирования: нормальное, абсолютное, относительное и фиксированное. В зависимости от выбранного типа, установленного через свойство position, будет изменяться и система координат.
Вместе со свойством position целесообразно использовать следующую комбинацию свойств (или лишь несколько из них): left , top , right , bottom и z — index , с их помощью элемент можно позиционировать более точно и в определенных случаях абсолютно независимо от соседних элементов. Свойства left , top , right , bottom отвечают за перемещение элемента от его первоначального положения в четырех направлениях: вправо, вниз, влево, вверх соответственно. Свойство z — index отвечает за перемещение элемента на другую плоскость (или уровень) и может принимать значения из диапазона от 1 до N.
Наиболее часто свойство position используется для определения взаимного расположения слоев, далее рассмотрим особенности разных типов позиционирования.
Нормальное позиционирование
По умолчанию, если для элемента не задано свойство position или ему задано значение static , слои позиционируются друг за другом, при этом каждый следующий начинается с новой строки. Причем, слои размещаются максимально близко к верхнему левому углу страницы и без отступов между границами.
Кроме этого, свойства left , top , right , bottom и их значения, если таковы определены, игнорируются браузером.
Можем убедиться в этом, отобразив два примера кода в браузере:
Без использования свойства position .