12794

Наслоение с помощью z-index (Слои)

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

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

Наслоение с помощью zindex Слои CSS оперирует в трёх измерениях высота ширина и глубина. Мы работали в двух измерениях на протяжении всех предшествующих уроков. В этом уроке мы научимся создавать слои/layers. Коротко говоря упорядочивать элементы так чтобы они перекрывали...

Русский

2013-05-03

21.24 KB

2 чел.

Наслоение с помощью z-index (Слои)

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

Для этого вы можете присвоит каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером.

Скажем, мы играем в покер и у нас - royal flush. Наша "рука" должна быть представлена так, чтобы каждая карта имела z-index:

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

Вот код примера с картами:

#ten_of_diamonds {

position: absolute;

left: 100px;

bottom: 100px;

z-index: 1;

}

#jack_of_diamonds {

position: absolute;

left: 115px;

bottom: 115px;

z-index: 2;

}

#queen_of_diamonds {

position: absolute;

left: 130px;

bottom: 130px;

z-index: 3;

}

#king_of_diamonds {

position: absolute;

left: 145px;

bottom: 145px;

z-index: 4;

}

#ace_of_diamonds {

position: absolute;

left: 160px;

bottom: 160px;

z-index: 5;

}

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

Это относительно простой метод, но в нём заложены большие возможности. Вы можете размещать текст над изображением, изображение над текстом и т. д.

Задание: поэкспериментируйте с “картами”, меняя значения z-index

Резюме

Слои можно использовать в различных ситуациях. Например, попробуйте использовать z-index для эффектов с заголовками вместо создания этих заголовков как графических элементов. С одной стороны, текст загружается быстрее, а с другой - потенциально улучшается работа поисковых машин.

К началу


 

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

81218. Поздний протестантизм, его основные формы 24.4 KB
  Баптисты веруют во второе пришествие Христа и воскресение мертвых. Установится тысячелетнее царствование Христа. Название связано с мифом о сошествии Святого Духа на апостолов в 50й день после вознесения Христа. Иеговисты признают единым богом Иегову Иисуса Христа порождением Иеговы и исполнителем его воли а под Святым Духом понимают власть Иеговы которая может влиять на сознание людей.
81219. Русская религиозная философия 28.04 KB
  Рассматривается вопрос мира и бытия человека в нем общественной жизни и исторического процесса. Ее духовным источником было православие а в центре внимания находилась тема Бога и человека взаимоотношение между ними. Основой нравственного прогресса поведения человека его воспитания и всей педагогики является по его мнению \'\' нерасторжимая связь поколений поддерживающих друг друга в прогрессивном исполнении одного общего дела – приготовления к явному Царству божию и к воскресению всех \'\'. Смысл и значение человека и человечества встать...
81220. Понятие и сущность религии. Основные подходы к ее трактовке 23.23 KB
  Сегодня существует многообразие исследовательских подходов к изучению природы и сущности религии в рамках которых предлагается разнообразие определений религии. Сущность религии выводят из наличия в мире сверхъестественных сил поэтому объективный идеализм философская основа теологии как системой обоснования и защитой религии. Существование религии объясняется расколом между телом и душой.
81221. Структура религии. Специфика религиозного сознания 24.51 KB
  Она включает в себя такие важнейшие элементы как: религиозное сознание религиозный культ религиозная организация. Интегративной чертой религиозного сознания является религиозная вера. Религиозное сознание неоднородно и существует на двух уровнях: обыденный или религиозная психология: совокупность представлений установок стереотипов чувств и настроений верующих. концептуальный или религиозная идеология: система идей принципов концепций разработанная и пропагандируемая теологами и служителями церкви.
81222. Религиозный культ и религиозные организации 24.7 KB
  Предметом культовой деятельности становятся различные объекты и силы осознаваемые в форме религиозных образов. Способы культовой деятельности определяются содержанием религиозных верований а также зависят от средств культа. На основе религиозных взглядов складываются определенные нормы предписания о том что и как нужно делать. Результатом культовой деятельности является прежде всего удовлетворение религиозных потребностей оживление религиозного сознания.
81223. Религия как социальное явление. Основные функции религи 23.81 KB
  Основные функции религии. Несколько подходов к определению религии: теологический философский критический научный. Два основных взгляда: религия существует в многообразии религий своего рода универсалия общий термин; религии существуют как модификации единой первоначальной религии. Функции религии...
81225. Происхождение религии и ее ранние формы 25.23 KB
  Тотемизм – вера в сверхъестественное родство между определенной группой предметов и людей. Магия – совокупность представлений и обрядов в основе которых лежит вера в возможность влияния на людей предметы и явления объективного мира с помощью определенных символических действий. Анимизм – вера в существование духов и душ. Существует как вера в духов не только умерших людей но и в духов природных явлений.
81226. Национальные религии Индии. Ведизм 20.79 KB
  Ведизм. К национальным религиям Индии относят ведизм индуизм джайнизм и сикхизм. Ведизм считается самой древней из всех национальных религий и одной из самых древних среди мировых. Характерная черта ведизма обожествление сил природы часто в мифологических образах.