- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Позиционирование, Декоративные элементы презентация
Содержание
- 2. Позиционирование Гибкий механизм расположения элементов. Не используется
- 3. Свойства позиционирования
- 4. Режимы позиционирования
- 5. Относительное позиционирование Смещение элемента относительно своего положения.
- 6. Смещение элемента div
- 7. Смещение элемента div
- 8. Смещение элемента div
- 9. /* смещение вправо-влево */ right left /*
- 10. Смещение элемента div
- 11. Абсолютное позиционирование Элемент выпадает из потока. Сжимается
- 12. Выпадение из потока
- 13. Координаты абсолютного элемента
- 14. Привязка к верхнему левому углу
- 15. Привязка к правому нижнему углу
- 16. Изменение точки привязки position: absolute;
- 17. Изменение точки привязки position: absolute;
- 18. Размеры с помощью координат position:
- 19. Изменение точки привязки Если среди родителей абсолютного
- 20. Относительные координаты
- 21. Относительные координаты
- 22. Центровка
- 23. Центровка
- 24. Относительные размеры Привязка происходит не только для
- 25. position: absolute; width: 50%;
- 26. Относительные
- 27. Положение по умолчанию Положение по умолчанию —
- 28. Координаты по умолчанию
- 29. Координаты по умолчанию
- 30. Координаты по умолчанию
- 31. Координаты по умолчанию
- 32. Положение по умолчанию Если абсолютному элементу не
- 33. Фиксированное позиционирование Похоже на абсолютное позиционирование. Отсчёт
- 34. Закреплённое позиционирование Комбинация относительного и фиксированного. Поддержка пока слабая. http://caniuse.com/#feat=css-sticky Демонстрация. http://jsfiddle.net/daker/ecpTw/light position: sticky;
- 35. Управление порядком слоёв z-index: 10; У
- 36. Управление порядком слоёв
- 37. Управление порядком слоёв div.layer2
- 38. div::before { content: ""; } div::after { content: ""; } Псевдоэлементы
- 39. Псевдоэлементы
- 40. ::before или :before? В стандарте псевдоэлементы используют ::, псевдоклассы :
- 41. Растровые спрайты
- 42. Растровые спрайты
- 43. Растровые спрайты
- 44. Нормализация стилей Если хочется нормализовать стили, то можно использовать normalize.css. http://necolas.github.io/normalize.css/
- 45. Подключение normalize.css
- 46. Текстовая «Барбершопа» без стилей
- 47. Текстовая с нормализацией
- 48. Текстовая со сброшенными стилями
Слайд 2Позиционирование
Гибкий механизм расположения элементов.
Не используется для создания сеток.
Используется для создания декоративных
эффектов и многослойных элементов интерфейса.
Слайд 5Относительное позиционирование
Смещение элемента относительно своего положения.
Управление точкой отсчёта абсолютных элементов.
Участвует в
«наслаивании».
position:
relative;
Слайд 7
Смещение элемента
div 1
position: static;
div 3
position: static;
div 2
position: relative;
Место в потоке
Слайд 8
Смещение элемента
div 1
position: static;
div 3
position: static;
div 2
position: relative; height: 100px;
Место в
потоке
Слайд 9/* смещение
вправо-влево */
right left
/* смещение
вверх-вниз */
top bottom
Смещение элемента
Не используйте противоположные свойства
одновременно
— они конфликтуют.
— они конфликтуют.
Слайд 10Смещение элемента
div 1
position: static;
div 3
position: static;
div 2
position: relative; top: 50px;
left: 100px;
Место
в потоке
100px
50px
Слайд 11Абсолютное позиционирование
Элемент выпадает из потока.
Сжимается под содержимое.
Гибкая модель позиционирования.
Свойства задания координат
ведут себя по-другому.
Участвует в «наслаивании».
Участвует в «наслаивании».
position:
absolute;
Слайд 12
Выпадение из потока
div 1
position: static;
div 3
position: static;
div 2
position: static;
div 1
position: static;
position
div
2 div 3 absolute; static;
Слайд 16
Изменение точки привязки
position: absolute; bottom: 50px; right: 50px;
50px
50px
position: relative;
Слайд 17
Изменение точки привязки
position: absolute; bottom: 50px; right: 50px;
50px
50px
position: relative;
Слайд 19Изменение точки привязки
Если среди родителей абсолютного элемента есть тег с относительным
позиционированием, то абсолютный привязывается к нему.
Если относительных родителей несколько, то выбирается ближайший.
Если относительных родителей несколько, то выбирается ближайший.
Слайд 20
Относительные координаты
position: absolute; top: 50%;
left: 50%;
50% высоты браузера
50% ширины браузера
Слайд 21
Относительные координаты
relative
top: 50%;
left: 50%;
50% высоты блока
50% ширины блока
position: absolute;
Слайд 23
Центровка
position: absolute; top: 50%;
left: 50%; width: 100px; height: 100px;
margin-top: -50px; margin-left:
-50px;
Слайд 24Относительные размеры
Привязка происходит не только для точки отсчёта координат, но и
для относительных размеров.
position:
absolute;
/* ширина и
высота
абсолютного
равны
половине
width: height:
50%;
50%;
ширины и
высоты
родителя */
Слайд 25
position: absolute; width: 50%;
height: 50%;
Относительные координаты
50% ширины браузера
50% высоты браузера
Слайд 26
Относительные координаты
position: absolute; width: 50%;
height: 50%;
50% ширины блока
50% высоты блока
relative
Слайд 27Положение по умолчанию
Положение по умолчанию — это когда у всех координат
значение auto.
top: auto;
top: auto;
right: bottom:
auto; auto;
left: auto;
Слайд 32Положение по умолчанию
Если абсолютному элементу не задавать никаких координат, то он
привязывается левым верхним углом к той точке, где был бы, если бы был нормальным.
Если эта точка смещается — он смещается вместе с ней.
Из этой точки его можно смещать внешними отступами
(margin).
Если эта точка смещается — он смещается вместе с ней.
Из этой точки его можно смещать внешними отступами
(margin).
Слайд 33Фиксированное позиционирование
Похоже на абсолютное позиционирование.
Отсчёт координат всегда привязан к окну браузера.
Элемент
«прибивается» к точке экрана и не смещается даже при прокрутке.
Участвует в «наслаивании».
Участвует в «наслаивании».
position:
fixed;
Слайд 34Закреплённое позиционирование
Комбинация относительного и фиксированного.
Поддержка пока слабая. http://caniuse.com/#feat=css-sticky
Демонстрация. http://jsfiddle.net/daker/ecpTw/light
position:
sticky;
Слайд 35Управление порядком слоёв
z-index: 10;
У кого больше индекс, тот и выше.
Выше тот,
кто дальше в коде, если индекса нет или он одинаковый.
Индекс работает только для относительных, абсолютных и фиксированных.
Индекс работает только для относительных, абсолютных и фиксированных.
class="layer3">" alt="">Слайд 37
Управление порядком слоёв
div.layer2 position: relative; z-index: 2;
div.layer3 position: absolute; z-index: 4;
div.layer5
position:
relative;
z-index: 1;
div.layer6 position: absolute; z-index: 3;
div.layer4
position: relative;
z-index: 6;
div.layer1
position: relative; z-index: 5;
Слайд 44Нормализация стилей
Если хочется нормализовать стили, то можно использовать
normalize.css.
http://necolas.github.io/normalize.css/
