Я установил 4 бокса в идеальном расположении, используя абсолютное позиционирование. Я понимаю, что вы в основном устанавливаете местоположение x, y для каждого блока, используя верхний, левый и родительский элементы - это начало. Все работало так, как я ожидал, и я изумился, как сработали хорошие вещи. Чем я ударил кнопку масштабирования в IE 9, и хотя поддерживаемые там координаты y ... х кориданаты сдвигаются влево ... некоторые даже за родительским элементом, который делает еще меньше смысла b.c. Я не указал никаких отрицательных значений. Почему масштабирование влияет на абсолютное позиционирование?Как абсолютное положение набора элементов?
ответ
Есть много способов сделать это правильно ...но то, что я закончил делать, и что делает больше всего для меня, - это установить координатную плоскость x-y и поместить ваши элементы с использованием полей или верхних и левых атрибутов. Для этого я устанавливаю родительский div в относительное позиционирование, чтобы он регистрировался как «происхождение», а затем установил четыре квадратные divs как абсолютные позиции. Это хорошо работает. Что с моей стороны, так это то, что вы должны установить родительский div из вашего абзаца, который позиционирует элементы для нестатического позиционирования.
Масштабирование изменяет размер этих элементов, но не его положение. Но я не знаю, как это предотвратить, я думаю, вы ничего не можете сделать против этого, потому что это вызвано браузером.
Возможна только проверка размера с помощью JavaScript, возможно, это можно распознать с помощью JS, но это будет очень сложно. Во всяком случае, важно, чтобы он работал во время масштабирования?
Не избегайте таблиц, если они находятся в правильном направлении - выравнивание 4 блоков слева направо, сверху вниз, проще всего сделать с таблицей, imho. Вы можете использовать div с поплавком влево и вправо и таким образом, но ячейки в таблице никогда не выходят из выравнивания.
Я согласен с вами в принципе, но в этом случае я не думаю, что таблица нужна. Кроме того, мне повезло больше с 'display: inline-block;' вместо 'float: left;' –
http://www.alistapart.com/articles/journey/ – Wex
Ваши абсолютные позиционированные элементы в настоящее время расположены относительно верхнего/левого положения тега <body>
(которое всегда равно 0px/0px).
Но у вас есть выровненный по центру макет с margin-left: auto; margin-right: auto;
, и вы хотите, чтобы абсолютно позиционированные элементы идеально соответствовали этому.
Скажите, что вы используете масштабирование, чтобы уменьшить страницу на 50%. Это уменьшит свойство позиции left
на 50% и уменьшит width
элемента margin:auto;
на 50% (запуск поля слева и справа будет увеличен тем изменением ширины!).
Таким образом, масштабирование страницы меньше делает наценку на центрированного элемента больше но это делает абсолютное положение координаты меньше.
Чтобы сделать его идеальным, вы должны сделать абсолютные позиционированные элементы относительно элемента с помощью margin-left: auto;
.
В вашем конкретном примере, я хотел бы сделать это:
div#Ab1
{
position: relative;
}
div#Ab1_2
{
position: absolute;
top: 80px;
right: 0px; /* note: setting a right position, not a left position */
}
/* and do the same for div#Ab1_4 and div#Ab1_4_under */
Имеет ли это смысл?
PS: причина, по которой она работала локально, а затем была сломана при загрузке, вероятно, вы не просматривали страницу с уровнем масштабирования по умолчанию на одном из них.
Если 4 блока одинаковы по высоте и ширине, вы можете сделать это:
div.block { height: 200px; width: 400px; float: left; }
Затем поместите их в контейнер, который позволяет два блока бок только бок.
Пример Fiddle: http://jsfiddle.net/u5xVa/
- 1. Абсолютное положение элементов в RDLC
- 2. Абсолютное положение игнорируется для элементов формы
- 3. Абсолютное положение CSS для элементов с элементами
- 4. Абсолютное положение Div относительно статических элементов
- 5. Абсолютное/фиксированное положение: предотвращение прокрутки элементов
- 6. Как установить абсолютное положение элементов в моем случае?
- 7. Вертикальное центрирование, абсолютное положение, несколько элементов
- 8. CSS и абсолютное положение
- 9. Как отслеживать абсолютное положение элемента
- 10. LibGDX Как нарисовать абсолютное положение
- 11. Как найти абсолютное положение всех элементов гиперссылки с помощью jQuery?
- 12. Абсолютное положение с поплавком
- 13. Установить абсолютное положение вида
- 14. Абсолютное положение элемента flexbox
- 15. Абсолютное положение и плавающий
- 16. Elm - абсолютное положение элемента
- 17. UIPickerView абсолютное положение
- 18. Абсолютное положение фонового изображения
- 19. Абсолютное положение внутри колонки
- 20. CSS установленное абсолютное положение
- 21. Абсолютное положение не работает
- 22. Давая абсолютное положение UICollectionViewCell
- 23. Абсолютное положение после масштабирования
- 24. Абсолютное положение вложенной ul
- 25. Относительное абсолютное положение CSS
- 26. Абсолютное положение в изображении
- 27. CSS: абсолютное положение и относительное положение
- 28. Как использовать абсолютное положение относительно родительского элемента
- 29. относительное/абсолютное положение css (координаты прямоугольных элементов прямоугольной области)
- 30. абсолютное положение проб в CSS
Это не просто масштабирование, вызывающее проблемы. Изменение размера окна браузера также имеет некоторые интересные результаты. –