1

На дисциплине "Тестирование и отладка ПО", препод дал задание написать интернет-магазин на любую тематику и я выбрал магазин плюшевых игрушек но вот текст "Приветики" находится за пределами div. Почему?

body {
  background-image: url(Images/BGI.jpg);
  background-attachment: fixed;
  font-family: Verdana;
  font-size: 14pt;
}
.Container {
  float: right;
  width: 600px;
  height: 800px;
}
.opacitydiv {
  float: left;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  background-color: white;
}
.RegistaryForm {
  width: 100%;
  height: 100%;
  z-index: 2;
  float: none;
}
<!DOCTYPE html>

<html>

<head>
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="~/App_Themes/Styles/RegisterStyle.css" type="text/css" />
  <title>Register</title>
</head>

<body>
  <div style="width: 820px; height: 600px; margin: auto">
    <div class="Container">

      <div class="opacitydiv"></div>

      <div class="RegistaryForm">

        Приветики
      </div>
    </div>
    <div style="width: 220px; height: 220px;">
      <a href="~/Home/Index/">
        <!--<img src="~/App_Themes/Styles/Images/Logo.png" width="220" height="220" style="border-radius: 220px;" />
      </a>
    </div>
  </div>
</body>

</html>

Скрин 1

Скрин 2

1
  • а как должно быть к итоге?
    – korytoff
    Commented 15 сент. 2015 в 12:37

3 ответа 3

1

Имеется не закрытый комментарий:

<!--<img src=

уберите его или закройте.

1
  • это лишь одна проблема, которая не является ответом
    – korytoff
    Commented 15 сент. 2015 в 12:36
1

body {
  background-image: url(Images/BGI.jpg);
  background-attachment: fixed;
  font-family: Verdana;
  font-size: 14pt;
}
.Container {
  float: right;
  width: 600px;
  height: 800px;
}
.opacitydiv {
  
}
.RegistaryForm {
 
  z-index: 2;
  float: none;
  border:1px solid red;
}
<!DOCTYPE html>

<html>

<head>
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="~/App_Themes/Styles/RegisterStyle.css" type="text/css" />
  <title>Register</title>
</head>

<body>
  <div style="width: 820px; height: 600px; margin: auto">
    <div class="Container">

      <div class="opacitydiv"></div>
      <div class="clear"></div>
      <div class="RegistaryForm">

        Приветики
      </div>
    </div>
    <div style="width: 220px; height: 220px;">
      <a href="~/Home/Index/">
        <img src="~/App_Themes/Styles/Images/Logo.png" width="220" height="220" style="border-radius: 220px;" />
      </a>
    </div>
  </div>
</body>

</html>

1

Во-первых у вас не закрытый комментарий. Нужно добавить --> после закрытия тега img

<!--<img src="~/App_Themes/Styles/Images/Logo.png" width="220" height="220" style="border-radius: 220px;" /> -->

Во-вторых у вас блок <div class="opacitydiv"></div> имеет 100% высоты родительского класса, поэтому следующий блок после него <div class="RegistaryForm"> располагается под ним.

В третьих как так, что у вас первый div имеет 600px высоты, а дочерний элемент <div class="Container"> имеет 800px?

Решение

Убрать высоту у блока <div class="opacitydiv"></div>

.opacitydiv {
  float: left;
  width: 100%;
  height: 100%; // убрать
  opacity: 0.9;
  background-color: white;
}

Либо разместить блок <div class="RegistaryForm"> внутрь блока <div class="opacitydiv"></div>

<div class="opacitydiv">
    <div class="RegistaryForm">
        Приветики
    </div>
</div>
7
  • Если я уберу опасити, то я уберу полупрозрачный задний фон который мне так нужен именно такого размера, не больше не меньше.
    – Aliaksei
    Commented 15 сент. 2015 в 14:51
  • @Алексей я предложил не opacity убирать, а высоту. Тогда расскажите где должен быть ваш текст?
    – korytoff
    Commented 15 сент. 2015 в 14:53
  • Простите ошибся, ну если я уберу высоту то исчезнет сам фон, размер его будет равен нулю пикселей и его не будет. Но я просто не могу понять почему слои находятся так как надо три слоя друг на друге, но всё содержимое этого дива находится ниже него?
    – Aliaksei
    Commented 15 сент. 2015 в 15:01
  • @Алексей у вас .opacitydiv имеет высоту 100% и следующий блок за ним .RegistaryForm у которого убрано свойство float распологается под ним. Это обычное поведение блочных элементов
    – korytoff
    Commented 15 сент. 2015 в 15:05
  • а как сделать что бы распологалось не под ним, а над ним? И что бы все размеры остались, z-index указан верно.
    – Aliaksei
    Commented 15 сент. 2015 в 16:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.