Help w/ Custom sheet repeating section

I'm very new to HTML and CSS, and I can't seem to figure out whats causing the problem. Clicking the modify button on this repeating section results in the yellow highlighted section being displayed behind all of the inputs making it neigh impossible to delete or move the content once its created is there anything obvious I'm missing here? <fieldset class="repeating_skills"> <div class="sheet-Rbox" style="height: 100px; width: 400px; z-index: -2;"> <div class="sheet-Label" style="width: 100px; z-index: -1;">Name:</div> <input type="text" style="width: 200px; left: 100px; z-index: -1;" class="sheet-Tinput" name="attr_character_skill_name"></input> <div class="sheet-Label" style="width: 150px; top: 20px; z-index: -1;">Attribute:</div> <select style="width: 250px; left: 150px; top: 20px; z-index: -1;" class="sheet-Select" name="attr_character_skill_attribute"> <option value="0">Pick one</option> <option value="@{character_strength}">Strength</option> <option value="@{character_dexterity}">Dexterity</option> <option value="@{character_constitution}">Constitution</option> <option value="@{character_Intelligence}">Intelligence</option> <option value="@{character_wisdom}">Wisdom</option> <option value="@{character_charisma}">Charisma</option> </select> <button class="roll_Roll" type="roll" value:="&{template:default} {{name=@{character_name}'s @{character_skill_name} Roll}} {{Talents=@{character_skill_talents}}} {{Result=[[1d20+@{character_skill_attribute}]] plus any relevant talents}}" style="left: 297px; top: 0px; z-index: -1;"></button> <div class="sheet-Label" style="width: 400px; top: 40px; z-index: -1;">Talents:</div> <textarea class="sheet-Tarea" style="width: 390px; height: 40px; top: 60px; z-index: -1;" name="attr_character_skill_talents"></textarea> </div> </fieldset>

Try adding  display:inline-block  to the outer div <div class="sheet-Rbox" style="height:100px; width: 400px; z-index: -2; display:inline-block"> It's good practice to use a css file and limit the amount of inline style if possible. You'll appreciate the flexibility and power you gain by using a css the more complex your sheet becomes.  Cheers

I can't reproduce your problem, but what Vince said about inline styles (though I don't see how inline-block would help here). Is there any particular reason all your elements have a negative z-index? (By the way, without an explicitly set position attribute, z-index won't do anything at all).

When I checked their code, the repitem controls were on top of the last textarea box within the repeating section.  Inline-block pushed the repitem controls to a position below the repeating section. vs adding inline-block edit: I guess I was solving another problem they didn't mention.  ;-P  Rearrange and Delete work for me as well, regardless of adding inline-block.

its because I forgot to add the css portion like a doof. div.sheet-Container {     position: absolute;     top: 45px;     width: 800px;     height: 2000px;     background: black;     border-radius: 5px; } div.sheet-LargeLabel {     position: absolute;     background: #333333;     border: none;     color: white;     font: 50px monospace;     line-height: 50px;     text-align:  center;     height: 50px;     border-radius: 5px; } button.roll_Handbook {     position: absolute;     display: block;     background: #993300;     border: none;     font: 50px monospace;     line-height: 50px;     text-align: center;     border-radius: 5px; } button.roll_Handbook:hover {     position: absolute;     display: block;     background: red;     border: none;     font: 50px monospace;     line-height: 50px;     text-align: center;     border-radius: 5px; } button[type=roll].roll_Handbook:before {      content: 'Handbook';      color: white;     font: 50px monospace;     line-height: 50px;     padding: 0px; } button.roll_Roll {     position: absolute;     display: block;     background: #993300;     border: none;     font: 10px monospace;     line-height: 17px;     text-align: center;     border-radius: 5px;     width: 100px;     height: 16px; } button[type=roll].roll_Roll:before {      height: 17px;     font: 20px monospace;     line-height: 17px;     text-align: center;     content: 'Roll';      color: white;     padding: 0px; } div.sheet-Label {     position: absolute;     background: #808080;     border: none;     color: white;     font: 20px monospace;     line-height: 20px;     text-align:  center;     height: 20px;     border-radius: 5px; } input.sheet-Tinput {     position: absolute;     display: block;     background: white;     border: none;     color: black;     font: 20px monospace;     line-height: 20px;     text-align:  center;     height: 20px;     padding: 0px;     border-radius: 5px; } textarea.sheet-Tarea {     position: absolute;     display: block;     background: white;     border: none;     color: black;     font: 20px monospace;     line-height: 20px;     border-radius: 5px;     text-align: left;     padding: 0px 5px;     resize: none;     overflow-x: hidden;     overflow-y: auto;     border-radius: 5px; } div.sheet-box {     position: absolute;     display: block;     background: black;     border: none;     color: black;     font: 20px monospace;     line-height: 20px;     border-radius: 5px;     padding: 0px;     overflow-x: hidden;     overflow-y: auto;     border-radius: 5px; } div.sheet-Rbox {     background: black;     border: none;     color: black;     font: 20px monospace;     line-height: 20px;     border-radius: 5px;     padding: 0px;     overflow-x: hidden;     overflow-y: auto;     border-radius: 5px; } select.sheet-Select {     position: absolute;     display: block;     background: white;     border: none;     color: black;     font: 20px monospace;     line-height: 20px;     text-align:  center;     height: 20px;     padding: 0px;     border-radius: 5px; }

I added your css and it seems to have a few "issues".  It looks like you are using a black background with black text which makes things a little hard to read.  ;-P  Also, do you have a reason for setting z-index?  On your textarea box ( textarea.sheet-Tarea ) I wasn't able to click in the field to enter text until I removed the inline style  z-index:-1. I assume you still plan to add a value to your button rolls?  Sorry, I know you were only asking for help on a specific problem.  Just tell me to focus on the question. ;-) I'm still not seeing an issue with using delete/move though...  Can you post a screenshot?

This might be the time to ask...are you using Firefox and/or Chrome?  If not, that could also be part of your problem...

Wow. Is everything  there absolutely positioned? This is a mess. In any case, it might help to give the .itemcontrol element a higher z-index, like 100.