12793

Позиционирование элементов

Практическая работа

Информатика, кибернетика и программирование

Позиционирование элементов При помощи CSSпозиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками см. лаб. № 11 позиционирование даёт вам большие возможности для создания точного и навороченного дизайна. В этом уроке мы обсуди

Русский

2013-05-03

41.88 KB

3 чел.

Позиционирование элементов

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками (см. лаб. № 11) позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.

В этом уроке мы обсудим следующее:

  •  Принципы CSS-позиционирования 
  •  Абсолютное позиционирование 
  •  Относительное позиционирование 

Принципы CSS-позиционирования

Представим окно браузера как систему координат:

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

Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см. лаб.№7) заголовок выглядит так:

Если мы хотим расположить его на 100px от верхней границы документа и на 200px слева, мы должны ввести следующий код CSS:

h1 {

position:absolute;

top: 100px;

left: 200px;

}

Вот результат:

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

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

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

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

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

#box1 {

position:absolute;

top: 50px;

left: 50px;

}

#box2 {

position:absolute;

top: 50px;

right: 50px;

}

#box3 {

position:absolute;

bottom: 50px;

right: 50px;

}

#box4 {

position:absolute;

bottom: 50px;

left: 50px;

}

  •  Показать пример 

Относительное позиционирование

Чтобы позиционировать элемент относительно, установите в свойстве position значение relative. Разница между относительным абсолютным позиционированием состоит в том, как обсчитывается позиционирование.

Позиция элемента, размещаемого относительно, обсчитывается относительно его оригинальной позиции в документе. Это означает, что вы смещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент всё ещё занимает в документе пространство после позиционирования.

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

#dog1 {

position:relative;

left: 350px;

bottom: 150px;

}

#dog2 {

position:relative;

left: 150px;

bottom: 500px;

}

#dog3 {

position:relative;

left: 50px;

bottom: 700px;

}

  •  Показать пример 

Задание: в последнем примере поменяйте позиционирование на абсолютное, почувствуйте разницу. 

Резюме

В последних двух уроках вы научились создавать поплавки и позиционировать элементы. Эти два метода дают вам определённые преимущества при конструировании страниц без необходимости использовать старые методы вроде таблиц и прозрачных изображений в HTML. Вместо них используйте CSS. Это точнее, имеет определённые преимущества  и намного проще в работе.

К началу


 

А также другие работы, которые могут Вас заинтересовать

77368. Remote Visualization in Computer Aided Engineering 14 KB
  IMM UrB RS Urls Stte University Computer ided Engineering softwre gin now the incresing distribution. To chieve dditionl productivity engineering clcultions re mde on the specil computing resources which re seprte from the engineers worksttion. It ssumes tht imges re rendered remotely from enduser worksttion close to the plce of ctul engineering computtions.
77369. РАЗРАБОТКА КОМПИЛЯТОРА ДЛЯ ЯЗЫКА ПРОГРАММИРОВАНИЯ RIDE.L 24 KB
  Согласно которой используя статическую типизацию и перегрузку операторов для описания семантики синтаксических конструкций языка на самом языке можно получать эффективный машинный код. Оператор в качестве аргументов получает несколько выражений и одну строковую константу содержащую ассемблерный код в тернарной форме. В общем случае аппликация операторов происходит так: код реализация оператора подставляется по месту обращения; код определяется следующим образом: если выражение это оператор код фрагментов при проходе слева...
77370. Методика распределенных вычислений RiDE 391 KB
  RiDE это методика для программирования в параллельных распределенных средах основанная на модели потока данных dtflow. Иногда при создании подобных решений используется модель потоков данных Dtflow. В различных вариантах методики основанные на моделях потоков данных применяются для создания процессорных архитектур суперкомпьютеров в целом для программной организации вычислительных потоков в рамках одного процесса и взаимодействия процессов в распределенной вычислительной среде. Методика основана на анализе...
77371. Технология параллельного программирования RiDE 34.5 KB
  УрО РАН RiDE это технология программирования в параллельных распределенных средах на основе модели потока данных dtflow. RiDE основана на анализе различных в том числе и собственных моделей потока данных. Технология RiDE базируется на понятиях хранилища задач и правил.
77372. Микроядро RiDE.C 19.5 KB
  Здесь разумно начать с описания микроядра RiDE. Многие особенности микроядра RiDE.C определяет базовый протокол обмена данными между задачами RiDE.
77373. Язык программирования RiDE.L 18 KB
  Традиционно используемые в HPC языки с архитектурой классических компиляторов: C, C++, FORTRAN, Pascal – не позволяют справляться с этой сложностью настолько хорошо, насколько позволяют более поздние языки: Haskell, JavaScript, Oz, Ruby. Но программы, написанные на таких языках недостаточно эффективны во время исполнения
77374. Распределенная виртуальная сцена в онлайн-визуализации 30.5 KB
  Визуализация результатов вычислений для большого числа задач выполняется с помощью трехмерной графики. Для отображения результатов счета часто применяются стандартные графические пакеты, такие как ParaView или Open Data Explorer. При этом существует необходимость получать представление и о ходе выполнения программы и состоянии обрабатываемых данных.
77375. Изучение социальной тревожности у различных групп пользователей сети Интернет 391 KB
  Провести теоретический анализ работ, посвященных социальной тревожности и проблемам, связанным с использованием сети Интернет и онлайн-игр. Выделить и описать группы пользователей сети Интернет и виды сетевой активности. Выявить факторы, связанные с проявлением высокой социальной тревожности. Подобрать методически инструментарий, позволяющий определить уровень социальной тревожности. Провести анализ различий в проявлении социальной тревожности между респондентами из различных групп.
77376. О подсистеме истории в среде научной визуализации SharpEye 48.5 KB
  Обсуждаются пути реализации подсистемы редактируемой истории в возможности которой должны входить функции отката и повтора манипуляций проделанных пользователем сохранение и восстановлении подобранного вида сцены. Ключевые слова: научная визуализация система визуализации подключаемые внешние модули редактируемая истории откат повтор действий Введение В течение последних лет авторы разрабатывают среду ShrpEye конструктор систем научной визуализации [34]. Соответственно система должна предоставлять пользователю функционал...