Open index.html in your browser to view the file. Add the text, CH 5 Extend Your Knowledge, to the title element. Open the styles.css file and locate the "sticky” comment and create a style rule for the sticky class selector with the following rules: Add a declaration for the position property with a value of -webkit-sticky. Add a declaration for the position property with a value of sticky. Add a declaration for the top property and specify a 0 value. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the sticky div element to briefly explain how to use the sticky position. In the styles.css file, locate the “relative” comment and create a style rule for the relative class selector with the following declarations: Add a declaration for the position property with a value of relative. Add another declaration for the top property and specify a value of 90px. Add another declaration for the left property with a value of 30px Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the relative div element to explain how the style rules affected the relative box. In the styles.css file, locate the “fixed” comment and create a style rule for the fixed class selector with the following declarations: Add a declaration for the position property with a value of fixed. Add another declaration for the top property and specify a value of 90px. Add another declaration for the right property with a value of 10px. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the fixed div element to explain how the style rules affected the fixed box. In the styles.css file, locate the “absolute” comment and create a style rule for the absolute class selector with the following declarations: Add a declaration for the position property with a value of absolute. Add another declaration for the bottom property and specify a 0 value. Add another declaration for the right property and specify a 0 value. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the absolute div element to explain how the style rules affected the absolute box.

Open index.html in your browser to view the file. Add the text, CH 5 Extend Your Knowledge, to the title element. Open the styles.css file and locate the "sticky” comment and create a style rule for the sticky class selector with the following rules: Add a declaration for the position property with a value of -webkit-sticky. Add a declaration for the position property with a value of sticky. Add a declaration for the top property and specify a 0 value. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the sticky div element to briefly explain how to use the sticky position. In the styles.css file, locate the “relative” comment and create a style rule for the relative class selector with the following declarations: Add a declaration for the position property with a value of relative. Add another declaration for the top property and specify a value of 90px. Add another declaration for the left property with a value of 30px Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the relative div element to explain how the style rules affected the relative box. In the styles.css file, locate the “fixed” comment and create a style rule for the fixed class selector with the following declarations: Add a declaration for the position property with a value of fixed. Add another declaration for the top property and specify a value of 90px. Add another declaration for the right property with a value of 10px. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the fixed div element to explain how the style rules affected the fixed box. In the styles.css file, locate the “absolute” comment and create a style rule for the absolute class selector with the following declarations: Add a declaration for the position property with a value of absolute. Add another declaration for the bottom property and specify a 0 value. Add another declaration for the right property and specify a 0 value. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the absolute div element to explain how the style rules affected the absolute box.

Computer Networking: A Top-Down Approach (7th Edition)

7th Edition

ISBN:9780133594140

Author:James Kurose, Keith Ross

Publisher:James Kurose, Keith Ross

Chapter1: Computer Networks And The Internet

Section: Chapter Questions

Problem R1RQ: What is the difference between a host and an end system? List several different types of end...

See similar textbooks

Related questions

Question

Open index.html in your browser to view the file.

Add the text, CH 5 Extend Your Knowledge, to the title element.

Open the styles.css file and locate the "sticky” comment and create a style rule for the sticky class selector with the following rules:

Add a declaration for the position property with a value of -webkit-sticky.
Add a declaration for the position property with a value of sticky.
Add a declaration for the top property and specify a 0 value.

Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the sticky div element to briefly explain how to use the sticky position.

In the styles.css file, locate the “relative” comment and create a style rule for the relative class selector with the following declarations:

Add a declaration for the position property with a value of relative.
Add another declaration for the top property and specify a value of 90px.
Add another declaration for the left property with a value of 30px

Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the relative div element to explain how the style rules affected the relative box.

In the styles.css file, locate the “fixed” comment and create a style rule for the fixed class selector with the following declarations:

Add a declaration for the position property with a value of fixed.
Add another declaration for the top property and specify a value of 90px.
Add another declaration for the right property with a value of 10px.

Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the fixed div element to explain how the style rules affected the fixed box.

In the styles.css file, locate the “absolute” comment and create a style rule for the absolute class selector with the following declarations:

Add a declaration for the position property with a value of absolute.
Add another declaration for the bottom property and specify a 0 value.
Add another declaration for the right property and specify a 0 value.

Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the absolute div element to explain how the style rules affected the absolute box.

index.html

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Working with Positions</h1>

</header>

<main>

<h2>Sticky</h2>

<p>This is an example of an element with a sticky position. Its position is based on the user's scroll position.</p>

<p></p>

</div>

<h2>Relative</h2>

<p>This is an example of an element with a relative position. It can move around a little, depending on the viewport, but it is in a position relative to itself.</p>

<p></p>

</div>

<h2>Fixed</h2>

<p>This is an example of an element with a fixed position. Its position is relative to the viewport.</p>

<p></p>

</div>

<h2>Absolute</h2>

<p>This is an example of an element with an absolute position. It is similar to the fixed position; however, it is positioned relative to the closest parent element.</p>

<p></p>

</div>

</main>

</div>

</body>

</html>

styles.css

body {

background-color: #dde3fd;

}

#container {

padding-bottom: 500px;

}

.box {

border: 1px solid #000;

margin: 2%;

padding: 2%;

background-color: #798ef6;

color: #091034;

width: 400px;

height: 170px;

}

/* sticky */

/* relative */

/* fixed */

/* absolute */

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 5 steps with 4 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-engineering and related others by exploring similar questions and additional content below.

Recommended textbooks for you

Computer Networking: A Top-Down Approach (7th Edi…

Computer Engineering

ISBN:

9780133594140

Author:

James Kurose, Keith Ross

Publisher:

PEARSON