Sololearn CSS course Positioning and Layout answers

Here are all the questions and answers that I hope will help you learn CSS course.

Other course answers

Sololearn CSS course The Basics answers
Sololearn CSS course Working with Text answers
Sololearn CSS course Properties answers
Sololearn CSS course CSS3 Basics answers
Sololearn CSS course Gradients & Backgrounds answers
Sololearn CSS course Transitions & Transforms answers
Sololearn CSS course CSS Filters answers

36.1 Lesson

The display Property

Question:

display: block
What value of the "display" property makes the inline element act as a blocking level element?

Answer:

block

Question:

display: inline
What value of the "display" property makes the block level element act as an inline element?

Answer:

display: inline;

Question:

display:none
Make the element with the id="mystyle" disappear:

Answer:

<style>
  #mystyle {
    display: none;
 }
</style>

37.1 Lesson

The visibility Property

Question:

The visibility Property
The values of the "visibility" property are:

Answer:

visible
hidden

38.1 Lesson

Positioning

Question:

Positioning Elements
Why is the "static" value used in positioning?

Answer:

To make the element run in the natural order of the page

Question:

Fixed Positioning
Drag and drop from the options below to fix the paragraph to 100px from the top and 50px from the left:

Answer:

<style>
  p {
    position: fixed;
    left: 50px;
    top: 100px;
  }
</style>

Question:

Relative Positioning
What is the purpose of the "relative" value?

Answer:

It puts the element relative to the normal flow

39.1 Lesson

Floating

Question:

Floating
In which directions can the elements be floated?

Answer:

right
left

Question:

Elements Next to Each Other
What property along with float is used in the example to make the elements float side by side?

Answer:

width

40.1 Lesson

The clear Property

Question:

Clearing the Float
If there is an element with a float property, which neighbor elements will be affected?

Answer:

The ones coming after that element

Question:

Using clear
The clear property accepts the values none, left, right and:

Answer:

both

Question:

Clearing Floats
The clear property is used to:

Answer:

take the next element off the floating group

41.1 Lesson

The overflow Property

Question:

The overflow Property
The "overflow" property is used to:

Answer:

Specify the behavior that occurs when the content overflows the element's box

Question:

The overflow Property Values
Fill in the blanks to produce horizontal and vertical scrollbars:

Answer:

<style>
  div {
    width: 150px;
    height: 150px;
    background-color: LightBlue;
    float: left;
    overflow: scroll;
  }
</style>

Question:

auto and hidden
What is the default value of the overflow property?

Answer:

visible

42.1 Lesson

The z-index Property

Question:

The z-index Property
By default which element in the markup will overlap the others when elements begin stacking?

Answer:

the last element

Question:

Assigning the z-index Property
In order to make the z-index property work you must ...

Answer:

position elements

43.1 Lesson

Module 4 Quiz

Question:

If you give a negative value to the "top" property, in which direction will the box be moved?

Answer:

up

Question:

When the "float" property is used with the values of "left" or "right", anything else that lives in the containing element will:

Answer:

flow around the element associated with the "float" property

Question:

When the text needs more space than the dimensions of the box, the browser shows scrolls for the overflow property with the values of "scroll" and:

Answer:

auto

Question:

Assign width of 500px to the "text" element and enable fixed scrollbars:

Answer:

<style>
  #text {
    overflow: scroll;
    height: 200px;
    width: 500px;
  }
</style>

Question:

Fill in the blanks and make the blue box disappear from the webpage:

Answer:

<style>
  #red {
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 20;
  }
  #blue {
    position: relative;
    z-index: 50;
    display: none;
  }
</style>