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. Это точнее, имеет определённые преимущества  и намного проще в работе.

К началу


 

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

68230. МЕХАНІЗМ ВАЛЮТНОГО РЕГУЛЮВАННЯ В УКРАЇНІ 2.95 MB
  В умовах посилення процесів глобалізації фінансових ринків відкритості економік та їх взаємозалежності що обумовлюють зростання нестабільності національних валют роль механізму валютного регулювання постійно зростає.
68231. ЕКОЛОГО-ЕКОНОМІЧНІ ЗАСАДИ УПРАВЛІННЯ ЗЕМЕЛЬНИМИ ВІДНОСИНАМИ 540 KB
  Управління земельними відносинами є одним з найважливіших завдань в економічному середовищі країни що обумовлене сучасною земельною реформою. Фактично в державі не розроблено методології управління земельними відносинами як базису просторового соціальноекономічного розвитку.
68232. Методи та засоби персоніфікації інформаційного наповнення у глобальній системі World Wide Web 1.67 MB
  Позиціонування ІН цей напрям охоплює дослідження повязані з визначенням формуванням та підвищенням ефективності позиції ІН вебсайтів окремих вебсторінок та дописів користувачів WWW І. Пояснюється це тим що вкрай необхідно поліпшити якість величезних обсягів користувацького інформаційного...
68233. ЗНАЧЕННЯ ЕРИТРОПОЕТИНУ В РОЗВИТКУ АНЕМІЧНОГО СИНДРОМУ ПРИ ГОСТРІЙ МІЄЛОЇДНІЙ ЛЕЙКЕМІЇ 224 KB
  У хворих на гостру мієлоїдну лейкемію (ГМЛ) анемія розвивається у патогенезі самого захворювання та прогресує в процесі цитостатичної терапії. Уже в дебюті захворювання анемічний синдром викликає численні патологічні ефекти, асоціюється з погіршенням якості життя, зниженням професійної...
68234. УПРАВЛІННЯ ТОРГОВИМИ МАРКАМИ НА ПІДПРИЄМСТВАХ ЛЕГКОЇ ПРОМИСЛОВОСТІ 460 KB
  В умовах постійних змін і невизначеності торгова марка як і будь-який інший елемент системи маркетингу потребує цілеспрямованого управління метою якого є отримання стійких конкурентних переваг підтримка та збільшення кількості споживачів лояльних до торгової марки підприємства.
68235. УПРАВЛІННЯ КОНКУРЕНТНИМИ ПЕРЕВАГАМИ ПІДПРИЄМСТВ РОЗДРІБНОЇ ТОРГІВЛІ 325 KB
  Мета і завдання дослідження. Метою дослідження є обґрунтування теоретичних положень та розробка науково-методичних рекомендацій щодо удосконалення системи управління конкурентними перевагами підприємств роздрібної торгівлі.
68236. ОСОБЛИВОСТІ ПЕРЕБІГУ ІШЕМІЧНОЇ ХВОРОБИ СЕРЦЯ У ХВОРИХ ІЗ ХЛАМІДІЙНОЮ ТА ГЕРПЕСВІРУСНОЮ ІНФЕКЦІЄЮ 191.5 KB
  Незважаючи на досягнуті в останні десятиріччя успіхи в профілактиці та лікуванні ішемічної хвороби серця (ІХС), вона до цього часу є однією з актуальніших проблем сучасної кардіології. Це пов'язано із великою поширеністю серед осіб працездатного віку та розвитком ускладнень...
68237. ОРГАНІЗАЦІЙНО-ЕКОНОМІЧНИЙ МЕХАНІЗМ РОЗВИТКУ ДІЯЛЬНОСТІ ПІДПРИЄМСТВ З ВИРОБНИЦТВА ТА ПЕРЕРОБКИ СОЇ: ТЕОРІЯ, МЕТОДОЛОГІЯ, ПРАКТИКА 1.21 MB
  Такого природного сполучення білка жиру вуглеводів мінеральних солей і вітамінів як у насінні сої в інших продуктах рослинного і тваринного походження не зустрічається. Зростаючий попит на цю сільськогосподарську культуру набув планетарного значення що обумовлює формування...
68238. Пoлiтична та екoнoмiчна iнтеграцiя Угoрщини дo ЄС (1989-2004 рр.) 164.5 KB
  Oтже актуальнiсть вивчення oбранoї прoблеми oбумoвлена пoперше важливiстю iнтеграцiйних прoцесiв в iстoричнoму рoзвитку пoдруге пoяснюється глoбалiзацiєю яка диктує неoбхiднiсть пoшуку iнтеграцiйних стратегiй для...