'I am trying to put text behind an element but cant seem too

I have found that if I make it transparent, it fails to work, and if I try and put it in the content section, it goes wacky as hell. Thank you in advance!

Also, I know styling is weird for the viewport size, target screen size is for a Chromebook.

Also if anybody knows a place I could find to link a CSS reset instead of putting it all in, that would be nice.

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.gameWindow1 {
    padding-top: 200px;
    padding-bottom: 200px;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #efefef
}

.gameWindow2 {
    padding-top: 50px;
    padding-bottom: 50px;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 10px;
    background-color: #cccccc
}

.button {
    position: fixed;
    box-shadow: 0 4px #999;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgb(204, 52, 52);
    border-radius: 50px;
    border-width: 0px;
    text-align: center;
    margin-left: 45%;
    transition-duration: 0.5s;
    display: block;
    padding: 50px;
}

.button:hover {
    box-shadow: 0 8px #999;
    transform: translateY(-4px);
}

.button:active {
    background-color: rgb(124, 31, 31);
    transform: translateY(6px);
    box-shadow: 0 0px #999;
}
.stickynote {
    margin-top: 30%;
    background-color: rgb(230, 215, 84);
    width: 7.5%;
    height: 10%;
    padding-top: 5px;
    text-align: center;
    transform: rotate(5deg);
    margin-top: 25px;
    margin-left: 35%;
    border: 0px;
}
.stickynote:before {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    transition: all ease 0.1s;
    border-color: #efefef rgb(182, 170, 65) ;
}
.stickynote:hover:before {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0 30px 30px 0;
    border-color: #efefef rgb(182, 170, 65) ;
    
}
.stickynote:active:before {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0 80px 80px 0;
    border-color: #efefef rgb(182, 170, 65) ;
    
}
.underNote {
    margin-top: 40%;
    position: fixed;
    margin-left: 40%;
}
<head>
    <link rel="stylesheet" href=".\style.css">
    <script src=".\main.js">
    </script>
</head>

<body>
    <div class="gameWindow1">
        <button class="button"></button>
        <div class="stickynote">
            <p>Dont touch! Thanks!</p>
        </div>
        <div class="underNote">
        <p>.<br>e</p>
        </div>
    </div>
    <div class="gameWindow2">
    </div>
</body>

Edit: for some reason the display doesn't display the button, but that doesn't matter here so dont bother with that.

htmlcss


Solution 1:[1]

I believe the below code snippet applies to all elements on a page:

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Randi

Related Questions