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

@Mykola Balanov · Регистрация: 08.05.2013

Студворк — интернет-сервис помощи студентам

Доброе утро, CSS начал использовать совсем недавно. База знаний - вроде неплохая, но не могу разобраться. Сейчас вот, например с абсолютным позиционированием - какая то непонятк. Стили такие:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#page{
    width:1200px;
    margin:20px auto;
}
#blockFirst{
    background-color: #3bbbca;
    height: 220px;
    font-size: 25px;
}
#LOGO{
    position: absolute;
    top: 30px;
    left: 370px;
}
#pages{
    position: absolute;
    left: 900px;
    top: 200px;
}
#block_main {
    background-color: #7b8b98;
    text-shadow: 1px 1px 0 black;
    padding: 30px; 
}
#AddImages{
    
}

Код страницы такой:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="page">
 
    <div id="blockFirst">
        <div id="LOGO"><img src="logo.gif" width="400" height="200" /></div>    
        <div id=Pages">Images: 10</div>
        <div id="AddImages">
            <form name="ADD" method="POST" action="crop.php">
                
            </ form>
        </div>        
    </div>
    
    <div id="block_main">
        <h2>Crop</h2>
        <p>Drag on the larger image to select crop area.</p>
<p>
    <img id="photo" src="photo.jpg" height="700" alt="" title="" style="margin: 0 0 0 10px;" />
</p>

Логотип ложиться верно, а вот блок #pages - совсем не туда ложиться. Я скорее всего, что-то опустил. Что?

@smirnov1 · 02.06.2013, 07:46

То что id=Pages" только я заметил? Кавычку откройте перед названием идентификатора.

@Mykola Balanov · 02.06.2013, 08:08 **[ТС]**

Сообщение от smirnov1

То что id=Pages" только я заметил? Кавычку откройте перед названием идентификатора.

Этот ляп я заметил после того как отправил на сервер, ляп исправил - проблема осталась.

@-ReSideNT- · 02.06.2013, 11:45

Mykola Balanov,
Для родительского блока blockFirst попробуйте задать

CSS
1
2
3
4
5
6
#blockFirst{
    background-color: #3bbbca;
    height: 220px;
    font-size: 25px;
    position: relative; /* это позволит позиционировать внутренние элементы относительно этого блока  */
}

А элементам внутри блока с id blockFirst задайте необходимые отступы - left, top, right и bottom

@Mykola Balanov · 02.06.2013, 11:50 **[ТС]**

Добавил, задал необходимые свойтсва для дочерних блоков - проблема осталась

@gulliver · 02.06.2013, 11:55

где должен находиться блок pages?, сейчас он в левом верхнем углу.

@Mykola Balanov · 02.06.2013, 13:25 **[ТС]**

Этот блок родительский для остальных... В принцыпе на странице два блока один под другим в верхнем блоке три блока в ниэнем блоке тоже будет несколько блоков..

@gulliver · 02.06.2013, 13:33

что то я вас не понимаю. вы говорите что блок pages, "не туда ложиться" куда он должен лечь ?

@Mykola Balanov · 02.06.2013, 15:55 **[ТС]**

Я не говорю что блок page ну туда ложиться. (Моежет здесь я направильно вернее не совсем читабельно блоки назвал) Есть блок page - он родитель для всех остальных блоков страницы, и еть блок Pages - он дочерний для блока blockFirst.
Не туда ложиться в данный момент блок LOGO в прочем как и все остальные дочерние блоки блока blockFirst

Добавлено через 2 минуты
Если примерно описать то словами то дочерние блоки блока blockFirst должны "ложиться," так левый верхний угол - LOGO, по центру - Pages, правый верхний угол - AddImages

@-ReSideNT- · 02.06.2013, 17:03

Сейчас заметил ошибку - Pages и pages - это не одно и тоже, регистр соблюдайте

HTML5
1
<div id=Pages">Images: 10</div>

CSS
1
2
3
4
5
#pages{
    position: absolute;
    left: 900px;
    top: 200px;
}

в остальном делайте как я предлагал выше и все будет ок

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@smirnov1 1 / 1 / 0 Регистрация: 01.02.2011 Сообщений: 15
	02.06.2013, 07:46
	То что id=Pages" только я заметил? Кавычку откройте перед названием идентификатора. 0

@Mykola Balanov 0 / 0 / 0 Регистрация: 08.05.2013 Сообщений: 94
	02.06.2013, 11:50 [ТС]
	Добавил, задал необходимые свойтсва для дочерних блоков - проблема осталась 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	02.06.2013, 11:55
	где должен находиться блок pages?, сейчас он в левом верхнем углу. 0

@Mykola Balanov 0 / 0 / 0 Регистрация: 08.05.2013 Сообщений: 94
	02.06.2013, 13:25 [ТС]
	Этот блок родительский для остальных... В принцыпе на странице два блока один под другим в верхнем блоке три блока в ниэнем блоке тоже будет несколько блоков.. 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	02.06.2013, 13:33
	что то я вас не понимаю. вы говорите что блок pages, "не туда ложиться" куда он должен лечь ? 0

@Mykola Balanov 0 / 0 / 0 Регистрация: 08.05.2013 Сообщений: 94
	02.06.2013, 15:55 [ТС]
	Я не говорю что блок page ну туда ложиться. (Моежет здесь я направильно вернее не совсем читабельно блоки назвал) Есть блок page - он родитель для всех остальных блоков страницы, и еть блок Pages - он дочерний для блока blockFirst. Не туда ложиться в данный момент блок LOGO в прочем как и все остальные дочерние блоки блока blockFirst Добавлено через 2 минуты Если примерно описать то словами то дочерние блоки блока blockFirst должны "ложиться," так левый верхний угол - LOGO, по центру - Pages, правый верхний угол - AddImages 0