Skip to content

Commit 17f80a5

Browse files
juliocelonjuliocelon
committed
positions css
1 parent dd9a393 commit 17f80a5

File tree

3 files changed

+156
-5
lines changed

3 files changed

+156
-5
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎.vscode/launch.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"name": ".NET Core Attach",
9+
"type": "coreclr",
10+
"request": "attach"
11+
}
12+
13+
]
14+
}

‎css_positions.html

Lines changed: 142 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>CSS Positions</title>
88
<style>
9-
div
9+
body{
10+
background-color: #F2F3F4;
11+
font-family: Arial, Helvetica, sans-serif;
12+
}
13+
div
1014
{
1115
/* content size: */
1216
width: 250px;
@@ -25,8 +29,8 @@
2529
.container1
2630
{
2731
width: 500px;
28-
height: 500px;
29-
background-color: papayawhip;
32+
height: 300px;
33+
background-color: #85C1E9;
3034

3135
position: relative;
3236
top: 20px;
@@ -36,15 +40,45 @@
3640
color: white;
3741
width: 200px;
3842
height: 200px;
39-
background-color: purple;
43+
background-color: #0B02BE;
4044

4145
position: absolute;
4246
right: 0px;
4347
}
48+
49+
nav
50+
{
51+
color: white;
52+
width: 100%;
53+
height: 100px;
54+
background-color: #0B02BE;
55+
position:fixed;
56+
top: 0;
57+
}
58+
.onNav
59+
{
60+
position: absolute;
61+
left: 600px;
62+
width: 500px;
63+
64+
}
65+
66+
ul p
67+
{
68+
position: sticky;
69+
top:80px;
70+
color: white;
71+
background-color: #2E86C1;
72+
}
73+
74+
li
75+
{
76+
background-color: #85C1E9;;
77+
}
4478
</style>
4579
</head>
4680
<body>
47-
<section class="title"><h1>CSS Positions</h1></section>
81+
<nav><div class="onNav"><h1>CSS Positions</h1>position:fixed; top:0; width: 100%; height: 30px;</div></nav>
4882

4983
<div class="container1">
5084
position: relative;<br>
@@ -54,5 +88,108 @@
5488
right: 0px;
5589
</div>
5690
</div>
91+
92+
<ul>
93+
<p>List 1 - position: sticky; top:60px;</p>
94+
<li>Item 1</li>
95+
<li>Item 2</li>
96+
</ul>
97+
98+
<ul>
99+
<p>List 2 - position: sticky; top:60px;</p>
100+
<li>Item 1</li>
101+
<li>Item 2</li>
102+
</ul>
103+
<ul>
104+
<p>List 3 - position: sticky; top:60px;</p>
105+
<li>Item 1</li>
106+
<li>Item 2</li>
107+
</ul>
108+
<ul>
109+
<p>List 4 - position: sticky; top:60px; </p>
110+
<li>Item 1</li>
111+
<li>Item 2</li>
112+
</ul>
113+
<ul>
114+
<p>List 5 - position: sticky; top:60px;</p>
115+
<li>Item 1</li>
116+
<li>Item 2</li>
117+
</ul>
118+
<ul>
119+
<p>List 6 - position: sticky; top:60px;</p>
120+
<li>Item 1</li>
121+
<li>Item 2</li>
122+
</ul>
123+
<ul>
124+
<p>List 7 - position: sticky; top:60px;</p>
125+
<li>Item 1</li>
126+
<li>Item 2</li>
127+
</ul>
128+
<ul>
129+
<p>List 8 - position: sticky; top:60px;</p>
130+
<li>Item 1</li>
131+
<li>Item 2</li>
132+
</ul>
133+
<ul>
134+
<p>List 9 - position: sticky; top:60px;</p>
135+
<li>Item 1</li>
136+
<li>Item 2</li>
137+
</ul>
138+
<ul>
139+
<p>List 10 - position: sticky; top:60px;</p>
140+
<li>Item 1</li>
141+
<li>Item 2</li>
142+
</ul>
143+
<ul>
144+
<p>List 1 - position: sticky; top:60px;</p>
145+
<li>Item 1</li>
146+
<li>Item 2</li>
147+
</ul>
148+
149+
<ul>
150+
<p>List 2 - position: sticky; top:60px;</p>
151+
<li>Item 1</li>
152+
<li>Item 2</li>
153+
</ul>
154+
<ul>
155+
<p>List 3 - position: sticky; top:60px;</p>
156+
<li>Item 1</li>
157+
<li>Item 2</li>
158+
</ul>
159+
<ul>
160+
<p>List 4 - position: sticky; top:60px; </p>
161+
<li>Item 1</li>
162+
<li>Item 2</li>
163+
</ul>
164+
<ul>
165+
<p>List 5 - position: sticky; top:60px;</p>
166+
<li>Item 1</li>
167+
<li>Item 2</li>
168+
</ul>
169+
<ul>
170+
<p>List 6 - position: sticky; top:60px;</p>
171+
<li>Item 1</li>
172+
<li>Item 2</li>
173+
</ul>
174+
<ul>
175+
<p>List 7 - position: sticky; top:60px;</p>
176+
<li>Item 1</li>
177+
<li>Item 2</li>
178+
</ul>
179+
<ul>
180+
<p>List 8 - position: sticky; top:60px;</p>
181+
<li>Item 1</li>
182+
<li>Item 2</li>
183+
</ul>
184+
<ul>
185+
<p>List 9 - position: sticky; top:60px;</p>
186+
<li>Item 1</li>
187+
<li>Item 2</li>
188+
</ul>
189+
<ul>
190+
<p>List 10 - position: sticky; top:60px;</p>
191+
<li>Item 1</li>
192+
<li>Item 2</li>
193+
</ul>
57194
</body>
58195
</html>

0 commit comments

Comments
 (0)